ReactJS setState仅在嵌套在setState中时才有效 [英] ReactJS setState only works when nested inside setState

问题描述

问题：
当我使用this.setState并且我在回调中输出状态时，它根本不会改变，但是当我将setstate嵌套在一个setstate中时，它将会正常工作。 >

示例：
这不行 -

 这个。 setState（{
 data：newData 
}）; 
  

这样做 -

  this.setState（{
 data：newData 
}，（）=> {
 this.setState（{
 data：newData 
}）; 
}）; 
  

这是否与反应批次状态更新的方式有关？

这是setstate不工作的实际代码，除非我嵌套它（我已经尝试在此函数中注释所有内容，并使用setState将coursePage设置为null，但不起作用除非嵌套）：

  cancelCPIndexChange（index）{
 let temp = this.state.coursePages; 
 this.hideEditingCoursePage（index）; 
 let cancelIndex = temp [index]; 
 temp = temp.slice（0，index）.concat（temp.slice（index + 1））; 
 temp = temp.slice（0，parseInt（cancelledIndex.course_pageindex）-1）.concat（cancelledIndex）.concat（temp.slice（parseInt（cancelledIndex.course_pageindex）-1））; 
 this.setState（{
 coursePages：temp 
}，（）=> {this.setState（{
 coursePages：temp 
}）; 
}）; 
} 
  

这是与cancelCPIndexChanges相同级别的另一个功能，可以修改状态当然页面：

  showEditingCoursePage（index）{
 let temp = this.state.coursePages; 
 temp [index] .editingCoursePage = true; 
 this.setState（{
 coursePages：temp 
}）; 
} 
  

这些功能在course.js中。这两个函数都传递给CoursePages.js，然后传递给CoursePage.js。

解决方案

根据： https://facebook.github.io/react/docs/component-api.html

setState（）不会立即将this.state变为异常，而是创建一个挂起的状态转换。在调用此方法后访问this.state可能会返回现有值。

（过去我注意到了这一点） p>

我不是100％确定，但我猜想你的回调函数中的第二个 setState 是冲洗创建第二个之前的待处理状态转换。

我不清楚你想要消费新的状态值？它应该在 render 方法中，您可以确定它已被更新（由于状态转换触发渲染）。如果要在 setState 之后立即使用它，您仍然可以引用该值，所以可以直接使用它。

The issue: When I use this.setState and I output the state in the callback, it doesn't change at all but when I nest the setstate inside a setstate it will then work correctly.

Example: This doesn't work -

this.setState({
    data: newData
});

This does work -

this.setState({
    data: newData
}, () => {
    this.setState({
        data: newData
    });
});

Does this have something to do with the way react batches state updates?

This is the actual code in which the setstate doesn't work unless I nest it (I've tried commenting everything out in this function and using setState to set coursePage to null but it doesn't work unless it's nested):

cancelCPIndexChange(index){
  let temp = this.state.coursePages;
  this.hideEditingCoursePage(index);
  let canceledIndex = temp[index];
  temp = temp.slice(0, index).concat(temp.slice(index+1));
  temp = temp.slice(0, parseInt(canceledIndex.course_pageindex)-1).concat(canceledIndex).concat(temp.slice(parseInt(canceledIndex.course_pageindex)-1));
  this.setState({
    coursePages: temp
  }, () => {this.setState({
      coursePages: temp
    });
  });
}

This is another function on the same level as cancelCPIndexChanges that is able to modify the state of coursePages:

showEditingCoursePage(index){
  let temp = this.state.coursePages;
  temp[index].editingCoursePage = true;
  this.setState({
    coursePages: temp
  });    
}

These functions are in course.js. Both these functions are passed down to CoursePages.js and then to CoursePage.js.

解决方案

According to: https://facebook.github.io/react/docs/component-api.html

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

(I've noticed this myself in the past)

I'm not 100% certain, but I'd guess that the second setState in your callback function is "flushing" the pending state transition before creating the second one.

I'm not clear on where you want to consume the new value of state? It ought to be in the render method where you can be sure it's been updated (As the state transition triggers the render). If you want to use it immediately after the setState you still have the reference to the value, so can use that directly.

这篇关于ReactJS setState仅在嵌套在setState中时才有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！