React JS 问题：数组无法传入useState状态，更新后始终为空

前置语法修正 #

你的代码存在两处基础语法问题需要先修复：

• 不能使用JavaScript关键字function作为自定义函数名，可改为loadData这类自定义名称
• React 自定义组件名必须首字母大写，原组件名project要修改为Project，否则会被识别为普通HTML标签无法正常渲染。

状态打印为空的核心原因 #

这是React状态更新的固有机制导致的：
React的useState返回的状态更新方法是异步批量执行的，调用setRows后，React不会立刻修改当前函数作用域内的rows变量，而是会将更新操作加入任务队列，等当前整个函数执行完毕后再批量处理更新、触发组件重渲染。
当前函数作用域内的rows是本次组件渲染时捕获的初始值[]，所以你在调用setRows后立刻打印rows，拿到的永远是本次渲染的旧值，而非更新后的值。

写法优化 #

你用array.map循环调用setRows的写法完全没有必要，直接把整个数组传给setRows即可，避免多次触发更新队列造成性能损耗：

// 冗余写法
array.map((row) => {
  return setRows(rows => [...rows, row])          
})

// 优化后写法
setRows(array)

验证状态更新成功的方法 #

你可以通过两种方式确认状态已经更新：

1. 在组件顶层作用域打印rows，组件每次重渲染都会输出最新的状态值
2. 用useEffect监听rows的变化，状态更新后会触发回调打印最新值

修正后完整代码示例 #

import { useState, useEffect } from 'react';

const Project = () => {
  const [rows, setRows] = useState([]);

  // 方式1：组件顶层打印，每次重渲染都会输出最新rows
  console.log('当前最新rows：', rows);

  // 方式2：监听rows变化触发回调
  useEffect(() => {
    console.log('rows更新完成，最新值：', rows);
  }, [rows]);

  const loadData = () => {
    const array = [{username: "username1"}, {username: "username2"}];
    setRows(array);
    // 这里打印的还是本次渲染捕获的旧rows值，属于正常现象
    console.log('刚调用setRows后的rows：', rows);
  }

  return (<button onClick={loadData}>加载数据</button>);
}

export default Project;

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