从MongoDB获取数据后useState状态更新异常问题求助

首先纠正你的误解：状态x并没有一直是undefined，控制台的输出已经说明状态成功更新了：

• 第一次输出[]是组件初始渲染时，useState([])的初始值；
• 第二次输出(3) [{…}, {…}, {…}]是数据获取完成后，setX(data)触发组件重新渲染，此时x已经是获取到的MongoDB数据。

为什么你会觉得x还是undefined？ #

React的状态更新是异步的，你在组件顶层写的console.log(x)会在每次组件渲染时执行：

1. 组件首次挂载：x是初始值[]，输出[]；
2. fetchData异步请求完成，调用setX(data)更新状态，组件重新渲染，此时x是新数据，输出(3) [{…}, {…}, {…}]。

如果是在fetchData内部直接打印x，会因为闭包捕获的是初始状态，看到的还是旧值，这是正常现象。

代码优化建议 #

你的代码里混用了await和.then/.catch，逻辑冗余，建议统一风格：

const [x, setX] = useState([])
const [err, setErr] = useState(null)

const fetchData = async () => {
  try {
    const res = await axios.get('/api/mongo')
    setX(res.data)
  } catch (error) {
    setErr(error)
    console.log(error)
  }
}

useEffect(() => {
  fetchData()
}, [])

// 正确观察状态变化的方式：监听x的更新
useEffect(() => {
  console.log('当前x的值:', x)
  // 这里可以处理x更新后的逻辑，比如渲染数据、做计算等
}, [x])

如何正确使用更新后的x #

• 在JSX中直接渲染：

  return (
    <div>
      {x.map(item => (
        <div key={item._id}>{item.name}</div>
      ))}
    </div>
  )
  

• 在useEffect中监听x的变化，执行后续逻辑（如上面代码所示）。

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