setState() 生效后如何触发 AJAX 调用？答案

【问题标题】：How to trigger an AJAX call after setState() is effective?setState() 生效后如何触发 AJAX 调用？
【发布时间】：2020-02-18 14:37:49
【问题描述】：

我正在创建一个搜索页面组件，其中包含许多用于过滤搜索结果的输入。

每个输入都会更改组件的状态，并应触发 AJAX 调用以刷新搜索结果：

handleSearchStringChange(event) {
    this.setState({
        filterSearchString: event.target.value
    });

    loadSearchResults(event.target.value);
}

render() {
    return (
        // ...

        <input type="text" value={this.state.filterSearchString} onChange={this.handleSearchStringChange} />

        // ...
    );
}

这一切都很好，但是，一旦您添加更多过滤器，将所有过滤器值传递给loadSearchResults() 变得很麻烦。

我想做的是像上面那样使用setState() 更新组件的状态，然后让loadSearchResults() 单独从状态构建AJAX 请求。

我现在不能这样做，因为setState() 是异步的，这样做会使loadSearchResults() 使用可能过时的数据。

有什么方法可以在setState() 完成之后触发 AJAX 调用？

【问题讨论】：

标签： reactjs

【解决方案1】：

是的，来自setState 的回调，例如

我也不会在 setState 调用中使用event.target，因为它是can be nullified。而是将其存储在局部变量中

let filterSearchString = event.target.value;

this.setState({ filterSearchString }, 
() => loadSearchResults(this.state.filterSearchString) );

【讨论】：

谢谢您，也感谢您对event.target 的建议！

【解决方案2】：

你可以这样做。你可以阅读这篇文章谁会帮你处理这个案例https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296

handleSearchStringChange(event) {
    this.setState({
        filterSearchString: event.target.value
    }, () => {
       loadSearchResults(event.target.value);
    });
}

【讨论】：

【解决方案3】：

setState 在完成状态更新时接受回调：

handleSearchStringChange(event) {
    this.setState({
        filterSearchString: event.target.value
    }, () => {
       loadSearchResults(this.state.filterSearchString);
    });
}

render() {
    return (
        // ...

        <input type="text" value={this.props.searchString} onChange={this.handleSearchStringChange} />

        // ...
    );
}

【讨论】：