javascript - 无法看到 componentWillMount() 中的数据？

Question

这个问题已经有答案了:

setState doesn't update the state immediately [duplicate] (15 个回答)

已关闭 5 年前。

我正在做.get()在 Jquery 中请求并更新状态。

我的问题是:

为什么我看不到console.log(this.state.storage)中的数据在componentWillMount()以及 componentDidMount()但我确实在 render() 中得到了输出？

此外，我还需要对获取的数据进行操作，我应该在哪个生命周期中执行此操作？

constructor() {
  super();
  this.state = {
    storage: []
  }
}

componentWillMount() {
  $.get('data.csv', (data) => this.setState({
    storage: data
  }));
  console.log(this.state.storage); //No Output
}

componentDidMount() {
  console.log(this.state.storage); //No Output
}

render() {
    return ( 
    <div >{this.state.storage}</div> //Do get the Output
    );

Answer 1

this.setState 更新组件状态的方式是异步的； documentation here 。如果您想查看 this.setState 所影响的更改，那么您必须将回调传递给函数调用

此外，您还可以在$.get方法的回调中进行操作，如下所示

constructor() {
  super();
  this.state = {
    storage: []
  }
}

myCustomOperations = (data) => {
  // do custom operations here with data
}

componentWillMount() {
  $.get('data.csv', (data) => {
    this.myCustomOperation(data);
    this.setState({
      storage: data
    }, () => {
      console.log(this.state.storage); // correct output
      // this.myCustomOperation(this.state.storage) // if you want to do the custom operation after the data has been put into the state
    });
  });
  console.log(this.state.storage); //No Output
}

componentDidMount() {
  console.log(this.state.storage); //No Output
}

render() {
    return ( 
    <div >{this.state.storage}</div> //Do get the Output
    );