List 如何将数组传递给React.js中状态为的对象

我正在使用React.js制作一个列表。此应用程序将包含两个列表，用户可以创建包含某些项目的列表

比如说,

1） 清单（如水果清单2蔬菜清单）

2） 食物清单（如1）水果——苹果、[2]香蕉、[3]橙子）

列表的数据存储为数组，项目列表存储为对象中的数组。我无法理解的是将数组传递给状态为的对象

这是我的密码： App.js

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
lists:[]，//它保存每个列表的名称
items:{}//此属性此对象的名称是列表的名称；它们的值是每个列表中项目的数组
};
}
handleAddList（列表）{
让列表=this.state.lists；
列表。推送（列表）；
let item=[lists]//如何将数组传递给对象？？
这是我的国家({
列表：列表，
项目：项目
})
console.log（this.state）
}
handleAddItem（项目）{
让items=this.state.items；
项目。推送（项目）；
这是我的国家({
项目
})
}
render（）{
返回(
);
}
}

AddList.js

class AddList extends Component {

 constructor(){
     super();
     this.state = {
        newList : {}
     }
 }

handleSubmit(e) {
     e.preventDefault(); // this prevents the page from reloading -- do not delete this line!

    if(this.refs.id.value ===''){
        alert('Add list')
    } else {
        this.setState({
            lists: this.refs.id.value
        }, function(){
        this.props.addList(this.state.lists);
   });
   }
 }

render() {
return (
  <div id="addListDiv">
  <form onSubmit={this.handleSubmit.bind(this)}>
  <div id='addList'>
  <label>What will be on your next list?&nbsp;
  <input type='text' ref='id' id='newID'></input>
  </label>
  </div><br />
  <input type='submit' value='Create List' />
  </form>
  </div>
);
}
}

类AddList扩展组件{
构造函数（）{
超级（）；
此.state={
新列表：{}
}
}
handleSubmit（e）{
e、 preventDefault（）；//这将防止页面重新加载--不要删除此行！
如果（this.refs.id.value==''）{
警报（“添加列表”）
}否则{
这是我的国家({
列表：this.refs.id.value
}，函数（）{
this.props.addList（this.state.lists）；
});
}
}
render（）{
返回(
你的下一份名单是什么？


);
}
}

如果这是一个列表，则应将其初始化为空数组

[]

。 此外，如果这是一个列表列表（如您所说），可能只将它们保留在一个状态属性中，其中每个

键

映射到特定的

列表

类型

this.state = {
  lists: {
    fruits: ['apple', 'banana', 'orange'],
    vegetables: ['tomato', 'carrot', ...],
  }
}

因此，每次向任何列表添加新项时，状态操纵都会变得更容易：

addItem(type, item) {
  this.setState({
    lists: {
      ...this.state.lists,
      [type]: [
        ...this.state.lists[type],
        item,
      ]
    }
  })
}

---

列表和项目应该分开。在这种情况下，我可以执行类似“this.setState（{lists:this.state.lists，items:…this.state.lists}）”的操作吗？我在我的代码中尝试了它，但它不起作用。在这种情况下，应该是：

this.setState（{items:[…this.state.lists]}）

。为什么在两个属性中保留相同的值？我尝试了您的代码，但出现了以下错误：`{lists:Array（1），items:{…}}}}items:{}lists:[“fruits”]proto:Object`Still

items:{}

为空。我想要有`items:{fruits:[]}`我想要在

items

中创建一个项目列表。这就是为什么我保持相同的值@美索卡林

addItem(type, item) {
  this.setState({
    lists: {
      ...this.state.lists,
      [type]: [
        ...this.state.lists[type],
        item,
      ]
    }
  })
}