Добавление в массив в состоянии массива в ReactJS

Question

Я пытаюсь добавить функциональность для добавления в состояние, а точнее «список», в следующем состоянии:

shoeList : [ 
  {name: 'Nike', 
   list : [
    {type: 'boots', revenue: '1000000', gender: 'mens', price: '49.99', id: 3},
    {type: 'shoes', revenue: '13280100', gender: 'womens', price: '99.99', id: 2}
    ]
  }
],

Сейчас у меня есть компонент, который отображает форму для пользователя, чтобы введите новые значения для типа дохода пол и цена.

Вот код для компонента (не включая формы и ввод текста html):

state = {

}

//when changes occur in text input fields
handleChange = (e) => {
    this.setState({
        [e.target.id]: e.target.value
    })
}

handleSubmit = (e) => {
    e.preventDefault();
    this.props.addShoe(this.state);

И в root компонент, у меня есть функция addShoe:

addShoe = (shoe) => {
shoe.list.id = Math.random();
//returns a new array so no alteration of original array
let shoeList = [...this.state.shoeList, shoe];
this.setState({
  shoeList: shoeList
})

}

Попытка этого кода дает мне ошибку, говоря, что shoe.list.id не определен? Также я думаю, что мне не хватает чего-то, чтобы добавить в файл компонента конкретно в состоянии. Также есть ли способ прямого доступа к списку, как this.state.shoeList.list? Я не уверен, если мне нужно добавить список в список обуви. Любая помощь будет велика, спасибо

Answer 1

В вашем примере, если вы хотите добавить элемент специально к Nike list:

addShoe = (shoe) => {
    this.setState({
        // return an altered copy of the array via map
        shoeList: this.state.shoeList.map(brandItem => {
            if (brandItem.name === 'Nike') {
                return {
                    // use spread syntax for other object properties to persist
                    ...brandItem,
                    list: [
                        // use spread syntax to keep the original items in the list
                        ...brandItem.list,
                        {
                            // assuming shoe is an object without an id property
                            ...shoe, 
                            id: Math.random()
                        }
                    ]
                }
            } else {
                return brandItem;
            }
    })
}