javascript - 如何向存储在组件状态中的空对象添加新属性？

Question

constructor() {
    super();
    this.state = {
        lists: [], // this holds the name of each list
        items: {} // this property names of this object are the names of the lists; their values are arrays of the items in each list
    };
}

handleAddList(s) {
    var curState = this.state.items;

    this.setState(prevState => ({
        lists: [...prevState.lists, s],
        items: //I am having trouble figuring out how I can use "s" and set that as a new property of this items object.
    }))
}

我希望 items 获得一个新属性，其 name 来自 s 并且其值最初为 [].

Answer 1

您对 lists 做同样的事情:您使用所有旧属性创建一个新对象，并进行更改。既然你已经说过(在评论中)你想要 {dog: []} 其中 dog 是 s 的值，你d 这样做:

this.setState(prevState => ({
  lists: [...prevState.lists, s],
  items: {...prevState.items, [s]: []}
}))

其中的 items 部分是两件事的组合:

1. ... 是 spread properties .它在概念上与数组传播(您在 lists 中使用的内容)相同，但它是新的:该提案目前处于第 3 阶段，但很快就会进入第 4 阶段。它已经被 Babel 编译了一年多，并且在 Chrome 中得到了 V8 的原生支持，在 Firefox 中得到了 SpiderMonkey 的原生支持(没有任何标志)。
2. [s] 是一个计算属性名。它创建一个名称为 s 的 value 的属性。