为什么Axios请求完成后React的state未更新？

核心原因 #

React的useState状态更新是异步批量执行的，调用setPredictedCrop(dataObject)后，predictedCrop不会立刻更新为新值。你紧接着执行的console.log(predictedCrop)，获取的还是更新前的旧空数组——这不是state没更新，而是读取时机不对。

解决办法 #

1. 用useEffect监听state变化获取新值

在组件中添加useEffect，将predictedCrop设为依赖项，当state更新完成后，effect会自动执行，此时就能拿到最新的state值：

import { useState, useEffect } from 'react';

// ... 组件其他代码 ...

const [predictedCrop, setPredictedCrop] = useState([]);

useEffect(() => {
  console.log('更新后的predictedCrop:', predictedCrop);
  // 所有需要基于新state的逻辑都可以写在这里
}, [predictedCrop]); // 仅当predictedCrop变化时触发

2. 直接打印待设置的新值（临时调试用）

如果只是想确认要存入state的数据是否正确，直接打印dataObject即可——它就是你要设置的新值，无需等待state更新：

.then((response) => {
  let dataObject = response.data;
  setPredictedCrop(dataObject);
  console.log('即将存入state的新值:', dataObject);
})

3. 统一异步代码写法（优化可读性）

你的代码同时混用了await和.then，建议统一用await写法，避免逻辑混淆：

const getWeatherDetails = async() => {
  try {
    const response = await axios.get(`${API_ENDPOINT}lat=${latitude}&lon=${longitude}&exclude=hourly,daily&units=metric&appid=${API_KEY}`);
    console.log(response.data);
    
    const dataToSend = response.data;
    const postResponse = await axios.post("http://localhost:4000/analysis", {
      data: dataToSend
    });
    let dataObject = postResponse.data;
    setPredictedCrop(dataObject);
  } catch {
    console.log("error");
  }
}

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