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],
  }

为什么不可变变量会被React的状态机改变？

2 个答案: