如何更新反应状态添加一个元素在数组，这是嵌套数组?

Question

const [persons, setPersons] = useState([
{ name: "", age: "", phoneNumbers: [''] },
]);

如果我们需要添加一个新的人，我们可以使用以下语法…

const addPersonFields = () => {
let person = {
name: "",
age: "",
phoneNumbers: [""],
};
setPersons([...persons, person]);
};

但是如何为索引"i"的人添加新的电话号码让它在反应状态下反应?

Answer 1

假设您知道要更新的人的索引，您可以这样做:

const addPersonPhoneNumber = (index, newNumber) => {
const newState = [persons];
newState[index].phoneNumbers.push(newNumber);
setPersons([...newState]);
}

Answer 2

另一种方法，我们可以通过直接使用setPersons来添加索引i的人的电话号码

const addPhoneNumber = (index, phoneNumber) => {
setPersons((prevPersons) => {
prevPersons[index].phoneNumbers.push(phoneNumber);
return [...prevPersons];
});
}

Answer 3

你必须首先找到那个人。下面的解决方案表明您已经有了想要添加电话号码的person对象。

const addPhoneNumber = (newNumber) => {
let index = persons.map((e) => e).indexOf(person);
persons[index].phoneNumbers.push(newNumber);
setPersons([...persons]);
};