在對象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
  }
});