ReactJS setState 仅在嵌套在 setState 中时才有效

IT技术 javascript reactjs ecmascript-6
2021-05-11 08:47:41

问题:当我使用 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。

2个回答

根据: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.

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

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

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

正如所说的 setState 是异步的。有两种方法可以在渲染之前访问新更新的状态值

  1. 对 setState 方法使用回调函数

  2. 使用 componentDidUpdate 方法。使用 nextState 参数,您可以访问最新状态。但是请确保您应该在其中使用 setState 方法