javascript - ReactJS setState 仅在嵌套在 setState 中时有效

Question

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

例子:这行不通-

this.setState({
    data: newData
});

这确实有效 -

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

这是否与 React 批处理状态更新的方式有关？

这是实际代码，除非我嵌套它，否则 setstate 不起作用(我已经尝试注释掉此函数中的所有内容并使用 setState 将 coursePage 设置为 null 但它不起作用，除非它被嵌套):

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
    });
  });
}

这是另一个与 cancelCPIndexChanges 处于同一级别的函数，可以修改 coursePages 的状态:

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

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

Answer 1

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

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

(我自己过去也注意到了这一点)

我不是 100% 确定，但我猜你的回调函数中的第二个 setState 是在创建第二个之前“刷新”挂起的状态转换。

我不清楚你想在哪里消费状态的新值？它应该在 render 方法中，您可以确定它已被更新(因为状态转换会触发渲染)。如果您想在 setState 之后立即使用它，您仍然拥有对该值的引用，因此可以直接使用它。