React状态未更新问题：获取服务器数据后无法读取state值

数据老陈

2026-7-19

React异步State更新导致获取数据为null的解决方案

问题根源

React的setState是异步操作，调用setData后state不会立刻更新，所以你在useEffect里刚调用完getData就执行getDataDetails，此时data还是初始的dataObj（也就是null）。
你的getData函数存在逻辑错误：setData(data)里的data是初始的state值，并非服务器返回的新数据，等于根本没更新state。

具体解决方案

方案1：直接传递服务器数据给`getDataDetails`

不用依赖state更新，拿到服务器数据后直接传给处理函数，这是最直接的方式：

const [data, setData] = useState(null); // 初始值设为null更合理

const getData = async () => {
  // 实际项目中替换成你的接口请求逻辑，比如fetch/axios
  const serverData = await fetch('/api/your-data').then(res => res.json());
  setData(serverData);
  getDataDetails(serverData); // 直接传入刚获取到的服务器数据
}

const getDataDetails = (targetData) => {
  console.log(targetData.empId); // 使用传入的数据，而非state
}

useEffect(() => {
  getData();
}, []); // 空依赖数组确保组件挂载时只执行一次

方案2：用useEffect监听data的变化

如果必须依赖state触发getDataDetails，可以给useEffect添加data作为依赖，当data更新后自动执行：

const [data, setData] = useState(null);

const getData = async () => {
  const serverData = await fetch('/api/your-data').then(res => res.json());
  setData(serverData);
}

const getDataDetails = () => {
  if (!data) return; // 先判断data不为null，避免报错
  console.log(data.empId);
}

// 初始化获取数据
useEffect(() => {
  getData();
}, []);

// 监听data变化，更新后执行处理逻辑
useEffect(() => {
  getDataDetails();
}, [data]); // 依赖data，data变化时自动触发