如何解决为什么在 useEffect() 中使用循环时 useState 钩子不更新
案例 1:
const [present,setPresent] = useState([]);
useEffect(() => {
for (var j = 1; j <= totalPeriod; j++) {
setPresent([
...present,{
period: j,present: true,},]);
}
},[]);
情况 2:
const [present,setPresent] = useState([]);
let createPresent = [];
for (var j = 1; j <= totalPeriod; j++) {
createPresent = [
...createPresent,{
period: j,]
}
useEffect(() => {
setPresent(createPresent);
},[]);
当我尝试在案例 1 中使用 useEffect()
内部的循环更新 present 状态时,present 状态不会更新。但是,当我在 useEffect()
之外单独使用循环并创建一个数组时,我将其分配给 present 状态(在情况 2 中),present 状态正在更新.
这背后的原因是什么?为什么在案例 1 中当前状态没有更新?
解决方法
您在案例 1 中所做的假设是 setPresent
调用是同步的,并且它会立即更新 present
,而实际上 React 中的状态更新几乎总是异步的。因此 present
中的 for (var j = 1; j <= totalPeriod; j++) {
变量将等于原始值,即一个空数组 []
。所以本质上,你一遍又一遍地设置状态:
[
...[],{
period: j,present: true,},]
这将导致您的状态更新为 for
循环创建的最后一个数组。因此,如果 totalPeriod
等于 5,您的状态最终将是 [{period: 5,present: true}]
而不是 [{period: 1,present: true},{period: 2,... ]
在案例 2 中,一切都非常简单,您可以在不弄乱状态变量的情况下组装数组,然后一次性设置状态。就像你在这种情况下应该做的那样。
,在以下情况下,您的 present
状态不是每个后续状态更新的结果,而是您拥有的初始状态 []
。 React 将批量这些更新,而不是让它们同步发生,如此有效地只有一个状态更新,present
更新到您的 for loop
中的最新条目。
const [present,setPresent] = useState([]);
useEffect(() => {
for (var j = 1; j <= totalPeriod; j++) {
setPresent([
...present,{
period: j,]);
}
},[]);
在下面的例子中,你首先用你需要的所有值组装一个createPresent
数组,最后调用状态更新器函数,即setPresent
来设置状态。
const [present,setPresent] = useState([]);
let createPresent = [];
for (var j = 1; j <= totalPeriod; j++) {
createPresent = [
...createPresent,{
period: j,]
}
useEffect(() => {
setPresent(createPresent);
},[]);
为了用第一个实现第二个行为,您可以使用 状态更新器回调,它将前一个状态作为参数,如下所示:-
const [present,setPresent] = useState([]);
useEffect(() => {
for (let j = 1; j <= totalPeriod; j++) {
setPresent(prevState=>[
...prevState,[]);
这里的状态更新也是批量,但在更新下一个状态之前会考虑之前的状态。
当我说批量状态更新时,我的意思是只有一个渲染。您可以通过在组件的函数体中执行 console.log('render')
来验证这一点。
请注意此处使用 let
而不是 var
,因为 let
是限定范围的,您将获得变量 j
的准确值。
除了其他答案:
在 React 组件中更新状态时,您需要牢记一些关键点。 首先,React state 中的更新 state 不是同步的,因此除非你异步触发,否则会被批处理。
state = { count: 0};
increment() {
this.setState({ count: this.state.count + 1});
this.setState({ count: this.state.count + 1});
this.setState({ count: this.state.count + 1});
console.log(this.state.count) // 0
}
increment()
console.log(this.state.count); // 1
并且,调用完成后 this.state.count 的最终值为 1 incemenent()
因为 React 批处理所有调用,并找出结果,然后有效地进行更改。这种纯 JavaScript 代码,在最后一个获胜的地方合并
newState = Object.assign(
{},firstSetStateCall,secondSetStateCall,thirdSetStateCall,);
所以,我们在这里可以说一切都与 JavaScript 对象合并有关。所以还有另一种很酷的方式,我们在 setState 中传递一个函数而不是 object。
其次,在反应钩子 useState
的情况下,updating function
(由 useState() 返回的数组的第二个元素)不会在状态对象的内容更改时重新呈现,引用必须更改状态对象。例如:这里我创建了沙箱:link
如果我没有改变数组的引用(即状态),它就不会重新渲染组件。
for (let key in newState) {
newStateToBeSent[key] = newState[key]; // chnaging the reference
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。