如何将数据库获取的数据立即存入React hooks以正常渲染下拉选项

根本原因 #

React 中 useState 的更新操作是异步批量执行的，调用 setdataSystem 后，当前代码作用域下的 dataSystem 还是更新前的旧值，需要等组件触发下一次重渲染后，才能拿到更新后的状态值，这是 React 的正常设计逻辑，不是Bug。
需要调用两次接口才能拿到值，大概率是两种情况：第一次调用接口时请求参数 ID 还未拿到有效值，或者你在调用 setdataSystem 后马上读取了当前作用域的旧状态值做逻辑处理。

解决办法 #

• 【set后立即要用最新值的场景】不要依赖刚更新的state，直接用接口返回的原始数据操作
  代码示例：

  const getDependentSystems = async() => {
    try {
      const response = await axios.get('/API' + ID)
      const newSystemList = response.data
      setdataSystem(newSystemList)
      // 要在这个逻辑里用最新值，直接读newSystemList，不要读dataSystem
      console.log('最新系统列表：', newSystemList)
    } catch (err) {
      console.error('获取系统列表失败：', err)
    }
  }
  

• 【下拉框不渲染最新数据的场景】优先排查调用时机和依赖绑定
  1. 确认下拉框的数据源绑定的是 dataSystem，如果下拉框组件用 React.memo 包裹，要检查依赖项是否正确包含了 dataSystem
  2. 确保调用接口时 ID 已经有有效值，建议用 useEffect 监听 ID 变化自动触发接口请求，避免手动调用时机不对的问题：

  // ID 为你的请求参数，可能来自props、其他state
  useEffect(() => {
    if (ID) { // 避免ID为空时发起无效请求
      getDependentSystems()
    }
  }, [ID])
  

• 【需要监听状态变化做后续操作的场景】用 useEffect 监听状态变化

  useEffect(() => {
    // 这里拿到的永远是更新后的最新dataSystem值
    console.log('状态更新后的系统列表：', dataSystem)
    // 其他需要基于最新状态执行的逻辑写在这里
  }, [dataSystem])
  

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