更新：

Question

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

const [list, updateList] = useState([defaultList]);

const defaultList = [
  {
    "name":"Element 1",
    "subList": [{"name": "Element 1"}]
  }
]

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

Answer 1

假设您要基于索引将项目追加到特定列表项的子列表中：

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

然后在组件需要的任何地方调用此函数（某些回调，在useEffect挂钩中等）

Answer 2

如果阵列中有一项，则必须使用新数据或修改过的数据重新创建阵列。

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
})

如何将项目推入useState数组中的对象数组？

2 个答案:

更新：