javascript - react componentDidMount()初始化状态

在React的一个小项目上工作，我正在使用Axios从经过测试工作的API中获取信息。问题是当我提取数据并尝试更新组件状态时，来自API的值没有被填充到要在组件中呈现的状态中。

我一直在尝试使数据处于这种状态：

  componentDidMount() {
    this.state.databases.forEach(d => {
      axios.get(`http://localhost:3204/customer/${d}/count`).then(value => {
        this.setState({ counts: this.state.counts.push(value.data) });
      });
    });
    console.log(this.state);
  }

以前的版本是这样写的：

componentDidMount() {
    let internalCounts = [];
    this.state.databases.forEach(d => {
        axios.get(`http://localhost:3204/customer/${d}/count`).then(value => {
            internalCounts.push(value.data);
        });
    });
    this.setState({count: internalCounts});
}

两种情况最终都有相同的结果。状态永远不会真正用新的count数组更新。我怀疑这是由于Axios和setState的异步性质引起的。

一种简单有效的方法来使这两个人停止比赛？

最佳答案

设置状态后不要立即使用console.log，因为它是异步的。通过对setState的回调来实现。

this.setState({...}, () => console.log(...))

或使用console.log在渲染方法中检查状态

另外，如果不适合，则尝试使用forEach一次发出所有请求，而不是执行Promise.all。

componentDidMount() {
    const promiseArray = this.state.databases.map( d =>
      axios.get(`http://localhost:3204/${d}/count`)
    )
    Promise.all( promiseArray )
      .then( ( results ) => {
        const data = results.map( result => result.data);
        this.setState( prevState => ({
          counts: [ ...prevState.counts, ...data]
        }))
      })
  }