如何在嵌套数组的状态变量中插入数组?——反应

Question

我有一个这样的状态变量:

const [todos, setTodos] = useState([])

我想把很多数组放入其中(数量未知)。这是我写的代码:

data.forEach(x => {
const userId = x.userId;
const to_to_user = data.filter(d=>d.userId===userId)
setTodos({...todos, [userId]:to_to_user});
});

问题是每一轮循环都会溢出前一个索引，并且在数组的末尾只有最后一个索引。有人有解决办法吗?

Answer 1

从技术上讲，您可以这样做:

data.forEach(x => {
const userId = x.userId;
const to_to_user = data.filter(d=>d.userId===userId)
setTodos((oldTodos) => {...oldTodos, [userId]:to_to_user}));
});

使您始终拥有最新版本的todos。

但不是多次调用setTodos，而是应该先创建对象，然后调用setTodos一次。

const newTodos = data.reduce((obj, x) => {
const userId = x.userId;
const to_to_user = data.filter(d=>d.userId===userId);
obj[userId] = to_to_user;
}, {});
setTodos((oldTodos) => {...oldTodos, ...newTodos});

无论如何，原行应该是

const [todos, setTodos] = useState({});

因为你存储的是数组的对象，而不是对象的数组或者数组的数组