为什么React中fetch请求URL读取的state值没有更新？

问题原因 #

React 类组件的 setState 为异步批量更新方法，调用后不会立刻修改当前作用域下的 this.state，因此你在 setState 后直接读取 this.state.data 拼接请求链接时，拿到的仍是更新前的初始值。

解决方案 #

方案1：直接使用已有的输入值 #

你需要赋值给 data 的搜索关键词本身已经实时存在于 this.state.instant_data 中，直接用该值拼接请求链接即可，无需等待 state.data 更新：

searchNews = async (e) => {
    e.preventDefault();
    const searchKeyword = this.state.instant_data
    this.setState({
      data: searchKeyword,
    });
    const link = `https://newsapi.org/v2/everything?q=${searchKeyword}&apiKey=API_KEY`;
    const raw_data = await fetch(link);
    const data = await raw_data.json();
    console.log(data);
};

方案2：将请求逻辑放入setState的回调中 #

setState 支持传入第二个参数作为回调函数，该函数会在state完全更新后才执行，此时读取的 this.state 就是最新值：

searchNews = async (e) => {
    e.preventDefault();
    this.setState({
      data: this.state.instant_data,
    }, async () => {
      // 回调内读取的state已经完成更新
      const link = `https://newsapi.org/v2/everything?q=${this.state.data}&apiKey=API_KEY`;
      const raw_data = await fetch(link);
      const data = await raw_data.json();
      console.log(data);
    });
};

内容的提问来源于stack exchange，提问作者Dhiran Sapkota