如何使用useState hook将对象数据存入数组并正确更新状态

• 状态更新逻辑位置错误：SetUserTokens写在for循环外部，更新时只拿到了循环结束后的最后一个对象，没有把循环内收集的全量数据传入。
• 变量名冲突：函数式更新的形参被命名为Tokens_Array，和本地收集数据的数组重名，导致更新逻辑里读取的是上一次的state旧值，不是本地循环攒的目标数组。
• 数组操作不规范：直接通过索引Tokens_Array[i] = Object的方式修改本地数组，没有生成新的数组引用，不符合React状态更新的不可变要求。
• 对状态更新异步特性认知错误：useState触发的状态更新是异步批处理的，调用SetUserTokens后立刻打印UserTokens，拿到的还是当前渲染周期的旧值，不是更新后的结果。

优先选择循环完成后一次性更新的方案，性能更好，不会触发多次重复渲染：

const [UserTokens, SetUserTokens] = useState([]);

// 初始化本地收集数组
const Tokens_Array = [];
// 你的for循环逻辑
for (let i = 0; i < 你的数据总长度; i++) {
  // 替换成你实际获取单个token对象的逻辑
  const tokenItem = 对应索引i的对象数据;
  Tokens_Array.push(tokenItem);
}
// 循环结束后，把收集到的全量数组直接更新到state
SetUserTokens(Tokens_Array);

如果确实需要每拿到一个对象就更新一次state（会触发多次重渲染，非必要不选），写法如下，注意不要和外部数组重名，基于上一次的state做追加：

for (let i = 0; i < 你的数据总长度; i++) {
  const tokenItem = 对应索引i的对象数据;
  SetUserTokens(prevTokens => [...prevTokens, tokenItem]);
}

不要在调用SetUserTokens的同步代码里直接打印UserTokens，要通过useEffect监听状态变化后打印，才能拿到最新值：

useEffect(() => {
  console.log("Tokens Array", Tokens_Array);
  console.log("User Tokens", UserTokens);
}, [UserTokens]);

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