Question

我有以下代码：

componentDidMount () {
    fetch('/data')
        .then(res => res.json())
        .then(data => this.setState({data}));

    this.countVar();
}

countVar () {
    //iterate through this.state.data and filter out certain values
}

countVar()功能不在componentDidMount()内加载。当我在console.log(this.state.data) - 函数之后立即componentDidMount()时，它返回一个空数组，所以我想这就是原因。我尝试使用componentDidUpdate()而不是countVar()，但我没有考虑到会产生无限循环。我不太清楚如何处理这个问题。

我提取的数据包含多个对象数组。在countVar()我过滤掉某个对象数组，因此我的函数结构。

有谁知道如何解决这个问题？

Answer 1

fetch('/data')
    .then(res => res.json())
    .then(data => this.setState({data}));

此代码是异步的。这意味着当获取完成时，它将运行传递给then回调的函数。您在注册承诺后直接运行迭代功能;在承诺得到解决之后。

同时

this.setState不同步。在请求设置状态后，您无法保证已设置。它在一段时间后设定，但React为此提供了一个选项;一旦状态设置完成，你就会传入一个回调函数。

this.setState({ data }, () => console.log('do something'))

Answer 2

您应该在Promise的然后中调用 this.countVar ，否则它将在获取Promise结束之前运行。

像这样：

componentDidMount () {
    fetch('/data')
        .then(res => res.json())
        .then(data => {
          this.setState({data}, this.countVar);
        });
}

我正在运行this.countVar作为setState的回调，以便在setState完成后运行它。

函数未在componentDidMount（）中加载

2 个答案: