在对象ES6内部反应Array的setState

Question

我是Java语言的新手，所以我可能缺少解决此问题的基础知识。 我正在尝试不同的东西，正在阅读教程，但到目前为止还没有运气。

目的是通过向包含在“ blockOptions”对象内的数组“ keywords”添加一个新关键字来修改状态。 我添加一个键/值，然后使用.map（）或在需要时删除关键字。 我也在尝试使用ES6建议。

这是构造函数：

      blockOptions: {
          ...
          keywords: [],

这是我从组件调用的函数

 onAddKeyword(e) {
    if (e.key === "Enter") {
      var newKeyword = {
        text: e.target.value,
        key: Date.now()
      };

      this.setState({
        blockOptions.keywords: [...this.state.blockOptions.keywords, newKeyword]
      });

      console.log(this.blockOptions.keywords);
      e.target.value = "";
      e.preventDefault();
    }
  }

如果我将相同的代码用于未嵌套在“ blockOptions”内部的数组，则一切正常。 关于代码本身的任何建议都是有价值的，因为我还是JS新手。

谢谢你的帮助

Answer 1

代码中的第一个问题是您假设

{
    blockOptions.keywords: []
}

作为一种快捷方式

{
     blockOptions: {
          keywords: []
     }
}

文字对象创建的左侧必须仅为String或Symbol ，您的示例应引发Uncaught SyntaxError: Unexpected token :

除此之外，您还需要执行以下操作：

this.setState({
    blockOptions: {
        ...this.state.blockOptions, //copy all the properties
        keywords: [...this.state.blockOptions.keywords, newKeyword]
    }
})

Objects上的collect / ...运算符不是ES2015功能，但可通过babel使用。

本机ES2015替代方案是

const blockOptionsCopy = Object.assign(
   {},
   this.state.blockOptions,
   { keywords: [...this.state.blockOptions.keywords, newKeyword] }
);
this.setState({
   blockOptions: blockOptionsCopy
})

Answer 2

    const { blockOptions } = this.state;
    blockOptions.keywords.push(newKeyword);
    this.setState({ blockOptions });

Answer 3

您必须做得一成不变，然后复制整个对象和内部数组。

首先使用传播运算符复制blockOptions 。 然后使用新数组覆盖keywords属性：

this.setState({
  blockOptions: {
    ...this.state.blockOptions, // copy blockOptions
    keywords: [...this.state.blockOptions.keywords, newKeyword] // overwrite keywords
  }
});