React中如何向嵌套数组类型的state变量中插入数组？

问题根源 #

你遇到的问题是因为React的setState是异步批量更新机制，循环中每次调用setTodos({...todos, [userId]:to_to_user})时，todos始终是初始的空数组（state还没来得及更新），导致每次都是基于空对象合并，最终只有最后一次的userId数据被保留。

最优解决方案：先预处理数据，一次性更新State #

不要在循环中多次调用setTodos，而是先把所有用户的分组数据整理好，再一次性更新状态，既避免异步问题，也提升性能（避免重复遍历data）：

import { useState } from 'react';

// 初始化时建议用空对象，因为最终结构是{ userId: 数组 }，不是数组
const [todos, setTodos] = useState({});

// 处理数据
const groupedTodos = data.reduce((acc, item) => {
  const userId = item.userId;
  // 若当前userId未在累加器中，初始化空数组
  if (!acc[userId]) {
    acc[userId] = [];
  }
  // 将当前item加入对应userId的数组
  acc[userId].push(item);
  return acc;
}, {});

// 一次性更新状态
setTodos(groupedTodos);

备选方案：函数式更新（不推荐用于循环场景） #

如果必须在循环中更新状态，可以使用setState的函数式写法，它会接收上一次的最新状态作为参数，确保每次更新都是基于最新值：

data.forEach(x => {
  const userId = x.userId;
  const to_to_user = data.filter(d => d.userId === userId);
  // 用函数式更新，prevTodos是上一次的最新状态
  setTodos(prevTodos => ({ ...prevTodos, [userId]: to_to_user }));
});

注意：这个方案会多次调用setTodos，且filter会重复遍历整个data数组，性能不如第一种方案，仅作为特殊场景下的备选。

额外提示 #

你初始的useState([])是数组类型，但最终要存储的是{ userId: 数组 }的对象结构，建议初始化时改为useState({})，避免类型混淆，让代码更清晰。

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