React中使用Axios响应数据设置useState状态为空如何解决

1. 最常见原因：React状态更新的异步特性 #

React的setState（包括useState返回的更新方法）是异步批量执行的，你调用setDataTemp后，当前函数作用域内的dataTemp仍然是本次渲染周期的旧值，不会立刻更新为新状态。你在finally块中打印拿到的初始空数组属于正常现象，不代表状态更新失败。

2. 验证状态是否正常更新 #

不要在请求的回调函数内打印状态验证更新结果，单独加一个副作用监听dataTemp的变化即可确认：

// 放在组件顶层，和useState同级
useEffect(() => {
  console.log('dataTemp 已更新为：', dataTemp)
}, [dataTemp])

如果这里可以正常打印出接口返回的数组，说明你的状态更新逻辑本身没有问题。

3. 潜在问题：引用类型修改异常 #

你当前代码中调用的removeRootUUID如果是原地修改传入数组的方法，可能会因为引用指向问题导致不可预期的状态异常，建议调整为拷贝后处理的逻辑：

await axios
  .get(network + '/getOverlayList', {
    cancelToken: source.token,
  })
  .then(response => {
    // 先拷贝原数组再处理，避免修改接口响应的原始引用
    const itemsCopy = [...response.data.items]
    removeRootUUID(itemsCopy, itemsCopy);
    return {
      ...response.data,
      items: itemsCopy
    };
  })
  .then(response => {
    // 可以加一行打印确认传入setDataTemp的值是否正常
    // console.log('待更新的items：', response.items)
    setDataTemp(response.items);
  })

如果removeRootUUID是返回处理后新数组的纯函数，注意要接收返回值，不要调用后直接丢弃：

.then(response => {
  const processedItems = removeRootUUID([...response.data.items], [...response.data.items]);
  return {
    ...response.data,
    items: processedItems
  };
})

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