javascript - React componentDidMount() 初始化状态

Question

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

这两种情况都会得到相同的结果。新的计数数组永远不会真正更新状态。我怀疑这是由于 Axios 和 setState 的异步性质造成的。

有什么简单有效的方法可以让这两个人停止互相竞争？

Answer 1

在第一个版本中，您是正确的，这是由于服务的异步性质造成的。您正在记录输出，但这是在服务解决之前发生的。

在第二个(前一个)示例中，您在解析之前设置状态。我建议采用以下方法，创建一个 promise 数组，然后等待所有 promise 解决后再更新状态:

componentDidMount() {
    const promises = [];
    this.state.databases.forEach(d => {
        promises.push(axios.get(`http://localhost:3204/customer/${d}/count`));
    });
    Promise.all(promises).then(results => {
        const internalCounts = [];
        results.map(result => {
            internalCounts.push(result.data);
        });
        this.setState({count: internalCounts});
    })
}