在 ReactJS 中添加到数组状态中的数组

Question

我正在尝试添加用于添加到状态的功能，更具体地说 "list"，处于以下状态：

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

在根组件中我有 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 之类的列表？我不确定是否必须将列表添加到 shoeList。任何帮助都将非常感谢

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

在 ReactJS 中添加到数组状态中的数组

Adding to an array within an array state in ReactJS

state

add

reactjs