為什么不可變變量會被React的狀態機改變？

Question

我有一個數組const defaultButtons = [{on: false},{on: false},{on: false}] 。 我也有一個稱為鍵盤的組件（鍵盤有3個按鈕）。 我希望它的state.buttons默認為defaultButtons數組。 因此，我將state.buttons設置為defaultButtons，但是每次更改狀態時，它也會更改defaultButtons數組。 我可以以某種方式將defaultButtons數組傳遞給React的狀態機，而不讓它更改原始狀態機嗎？

    const defaultButtons = [{on: false},{on: false},{on: false}];

    class Keyboard extends Component {
      state = {
        buttons: defaultButtons
      }

      componentDidMount(){
        this.setState({buttons: [{on: true},{on: true},{on: true}]}) // changed buttons
        console.log(defaultButtons) // [{on: true},{on: true},{on: true}] ?!?!? WTF
      }

      render(
        return(<div />)
      )

    }

Answer 1

您發布的代碼不是您自己運行的代碼，這使得調試起來有點困難。

this.setState(buttons: [{on: true},{on: true},{on: true}]); // Syntax error

因為fn(buttons: [...])不是編寫JavaScript的有效方法。 我想你在代碼中正在做的是

this.setState(buttons = [{on: true},{on: true},{on: true}]);

我能理解，因為javascript有時會造成混淆。 為了使錯誤更清晰，您可以將代碼重寫為

let argument = buttons = [{on: true},{on: true},{on: true}]
this.setState(argument);

在功能上與(buttons = [...])代碼完全相同。

您必須使用{}來指示要發送到setState的對象是一個對象，如下所示：

this.setState({ buttons: [{on: true}, {on: true}, {on: true}] });

Answer 2

您當前正在傳遞對defaultButtons變量的引用作為初始狀態。 如果克隆defaultButtons數組，則更改狀態時不會更新defaultButtons變量：

  state = {
    buttons: [...defaultButtons],
  }