时间戳

首页 > 解决方案 > 在 ReactJS 中的数组状态中添加到数组

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

问题描述

我正在尝试添加功能以添加到以下状态中的状态，更具体地说是“列表”：

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。任何帮助都会非常感谢

标签： reactjsstateadd

解决方案

在您的示例中，如果打算将项目添加到具体的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;
            }
    })
}

推荐阅读