如何使用useState将项推送到数组中对象的数组中

Question

我有一个包含对象的数组，这些对象也包含数组。如何使用useState将元素推送到对象内部的数组？

const [list, updateList] = useState([defaultList]);
const defaultList = [
{
"name":"Element 1",
"subList": [{"name": "Element 1"}]
}
]

在这种情况下，我如何更新subList？

Answer 1

如果您的数组中有一个项，则必须使用其中的新数据/修改后的数据重新创建数组。

updateList(state => {
const stateCopy = [...state]
stateCopy[index] = {
...stateCopy[index],
subList: [...state[index].subList, newItem]
}
return stateCopy
})

更新：

如果要根据项目名称进行更新。

updateList(state => {
const stateCopy = [...state]
const indexOfName = stateCopy.findxIndex(item => item.name === name)
stateCopy[indexOfName] = {
...stateCopy[indexOfName],
subList: [...state[indexOfName].subList, newItem]
}
return stateCopy
})

Answer 2

假设您想将一个项目附加到特定列表项目的子列表中，基于索引：

function appendSublistItemForItemAtIndex(newItem, index) {
updateList([
...list,
[index]: {
...list[index],
subList: [
...list[index].subList,
newItem
]
}
])
}

然后在组件需要的地方调用这个函数(一些回调，在useEffect钩子中，等等(