Javascript 对象ES6内数组的反应设置状态

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

目标是修改状态，只需向“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还是新手

---

感谢您的帮助

您必须永久地执行此操作并复制整个对象和内部数组

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

首先使用扩展运算符复制

块选项。然后用一个新数组覆盖
关键字
属性：

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

代码中的第一个问题是您支持

{
    blockOptions.keywords: []
}

作为一种快捷方式

{
     blockOptions: {
          keywords: []
     }
}

文字对象创建的左侧只能是
字符串
或
符号
，您的示例应该抛出
未捕获的语法错误：意外标记：

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

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

对象上的gather/
…
操作符不是ES2015功能，但可通过babel获得

本地ES2015替代方案是

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

只要
this.state.blockOptions
是一个对象，您就需要
setState
对象：
this.setState（{blockOptions:{keywords:…}}）
尝试将函数声明更改为
onAddKeyword=（e）=>{
由于它是一个事件函数，您可能需要检查此

等于什么。您可能正在将event.state设置为某个值，而不是组件。用几句话解释您的答案会很有帮助。