axios发送POST请求后使用setState更新React组件状态不生效问题求助

React 中 useState 返回的状态更新函数是异步批量执行的，调用 setOffers 后不会立刻修改当前渲染周期作用域下的 offers 变量。状态更新会被暂存到更新队列，等当前所有同步代码执行完毕、触发组件重新渲染后，新的状态才会在下次渲染的作用域中生效。所以你在 setOffers 后立刻打印拿到的是本次渲染初始的空对象，属于正常机制，并非状态更新失败。

• 方法1：通过 useEffect 监听 offers 变化，在回调中即可拿到更新后的值：

useEffect(() => {
  console.log('更新后的offers：', offers)
}, [offers])

• 方法2：直接在组件JSX中绑定offers的相关属性，状态更新后界面会自动同步最新值。

原代码中search函数的定义存在语法错误，async关键字需要放在箭头函数前，同时可以改用async/await写法减少回调嵌套，可读性更强：

const [offers, setOffers] = useState({});

// 修正async位置
const search = async (e) => {
    e.preventDefault();
    const options = {
      url: "localhost:8080/api/search",
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json;charset=UTF-8",
      },
      data,
    };
    try {
      const response = await axios(options)
      console.log(response.data.data);
      setOffers(response.data.data);
    } catch (error) {
      if (error.response) {
        setValerr(error.response.data.errors);
        console.log(error.response);
      }
    }
};

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