为什么使用React Hooks调用setRows后，rows状态仍为空数组？

你遇到的现象是React状态的异步批量更新机制和函数闭包共同导致的，具体原因有两点：

• setRows是异步更新操作，调用后不会立刻修改当前作用域下的rows变量，当前getPlants函数作用域内拿到的rows永远是本次组件渲染时的闭包值，也就是初始的空数组。
• fetch本身是异步网络请求，你写在fetch后的console.log(rows)会在请求还未返回、setRows还未执行的时候就提前运行，自然拿不到接口返回的最新数据。

根据你的使用场景选择对应处理方式即可：

场景1：需要在接口返回、状态更新后立刻处理数据 #

直接使用接口返回的resultJson即可，不要依赖当前作用域的rows状态，修改代码如下：

const [rows, setRows] = useState([])

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

const getPlants= () =>{
  fetch('http://localhost:3001/api/getPlants',{
    method:'GET',
    headers:{
      'Content-Type':'application/json'
    }
  }).then(res => res.json())
  .then(resultJson => {
    setRows(resultJson)
    // 所有需要用到最新数据的逻辑直接在这里处理
    console.log(resultJson)
  })
}

场景2：其他逻辑需要用到更新后的rows状态 #

• 如果是在JSX中渲染数据，直接使用rows即可，状态更新后组件会自动重新渲染，渲染时读取的就是最新的rows值
• 如果需要在rows更新后自动执行其他逻辑，把对应逻辑放到依赖项包含rows的useEffect中即可：

// 监听rows变化，每次rows更新后都会触发该effect执行
useEffect(() => {
  if (rows.length > 0) {
    // 在此处调用需要处理rows的其他方法
    console.log('最新rows数据：', rows)
  }
}, [rows])

补充说明 #

如果你的其他方法是用户主动触发的（比如点击按钮调用），只要触发时机在接口返回、状态更新之后，直接读取rows就能拿到最新值，不需要额外处理。

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