Как положить sh элемент в массив объекта в массиве с помощью useState?

Question

У меня есть массив с объектами, которые также содержат массив. Как я могу поместить sh элемент в этот массив внутри объекта, используя 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

Предполагая, что вы хотите добавить элемент в подсписок указанного c элемента списка на основе индекса:

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

Затем вызывайте эту функцию там, где это необходимо для вашего компонента (некоторый обратный вызов, в useEffect hook, et c.)