Question

我有一个处理程序，用于更改我的react应用程序的某些状态，比如说它会改写状态条目data：

state = {
   data:[1,2,3,4,5]
  };

 public handleShuffle = () => {
    const current = this.state.data;
    const shuffled = current
      .map((a: any) => [Math.random(), a])
      .sort((a: any, b: any): any => a[0] - b[0])
      .map((a: any) => a[1]);
    this.setState({
      ...this.state,
      data: shuffled
    });
    consoleLog(this.state.data[0])
  };

是否仍可以在此处理程序中访问此新的改组数组，因此日志不是以前状态的1，而是新的改组后的日志？

Answer 1

setState在将对象作为第一个对象传递时接受第二个回调参数：

this.setState({ data: shuffled }, () => {
  this.state.data === shuffled // true
}

假设您在同一范围内，则实际上不需要回调，因为您已经在shuffled中拥有了即将发生状态的值，并且可以继续使用它。

通常，如果您要等到this.state更新并且组件已重新渲染后，建议您使用componentDidUpdate而不是setState回调。

请注意，setState已经对您传入的对象进行了浅比较，并合并到新的更新中。您不需要这样做：setState({ ...this.state })，实际上这样做是有害的。

Answer 2

您可以将第二个参数传递给setState。请尝试以下方法：

this.setState({
  ...this.state,
  data: shuffled
}, () => console.log(this.state.data[0]));

Answer 3

状态更新为异步，并且setState有回调

尝试

public handleShuffle = () => {
const current = this.state.data;
const that = this;
const shuffled = current
  .map((a: any) => [Math.random(), a])
  .sort((a: any, b: any): any => a[0] - b[0])
  .map((a: any) => a[1]);
this.setState({
  ...this.state,
  data: shuffled
}, ()=>{
   consoleLog(that.state.data[0])
});
};

在当前处理程序中访问新状态

3 个答案: