如何将axios.get获取的数据立刻存储到React Hooks的state中

React 的 useState 状态更新是异步批量执行的，调用 setdataSystem 后，当前函数作用域内的 dataSystem 还是更新前的旧值，这是React的默认设计，不是代码报错。
你需要触发两次才生效的核心原因大概率是：第一次调用 getDependentSystems 后，你直接在当前函数作用域里用了还没更新的旧 dataSystem 做渲染/后续逻辑，等第二次调用时，上次的状态更新已经落地，才会拿到正确值。

• 首先确认下拉框的选项正确绑定了 dataSystem 状态，只要绑定正确，React会在状态更新后自动触发下拉框重渲染，不需要额外操作，示例代码如下：

// 以Ant Design Select组件为例，原生select同理
<Select
  options={dataSystem.map(item => ({
    label: item.SYSTEMID,
    value: item.ID
  }))}
/>

• 如果需要在dataSystem更新后执行后续逻辑，不要在getDependentSystems里直接调用dataSystem，而是通过useEffect监听状态变化：

useEffect(() => {
  // 此处拿到的永远是最新的dataSystem值
  console.log('更新后的系统列表：', dataSystem)
  // 后续逻辑写在这里
}, [dataSystem])

• 如果getDependentSystems调用后需要立即使用最新的列表值，直接用接口返回的response.data即可，不要取当前作用域的dataSystem：

const getDependentSystems = async() => {
  const response = await axios.get('/API' + ID)
  const newSystemList = response.data
  setdataSystem(newSystemList)
  // 直接用newSystemList做后续操作即可
  handleAfterGetList(newSystemList)
}

• 排查闭包陷阱：如果getDependentSystems被useCallback包裹，确保依赖项填写正确，避免获取到旧的状态和函数。

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