javascript - 在 react 中引用状态

Question

保留对特定(或“事件”)对象的引用是我在许多情况下使用的一种模式，用于对对象数组(或您拥有的对象)中的特定对象进行更改。

  state = {
  object1: { 'data': 'data1'},
  active_object: null,
}

// point active_object to object1
state.active_object = state.object1;

// modify it through the reference
state.active_object.data = 'data1modified';

// works as expected
console.log('object1.data: ' + state.object1.data);

现在， react 组件状态中的等价物将是沿着这些线的东西(请注意，这不起作用)。我想引用文献“在翻译中的某个地方”丢失了。有没有一种(简单)的方法来模仿上面的模式(除了重组，使用对象键等)来使用 react 和状态完成同样的事情？

class App extends Component {
  constructor() {
    super()
    this.state = {
      active_object: null,
      object1: { 'data': 'data1'},
    }
  }

  modifyState() {
    // point active_object to object1 (using *functional* setState)
    this.setState((state) => (
      { active_object: state.object1 }
    ))

    // modify it through the reference (using *functional* setState)
    this.setState((state) => (
      { active_object: { ...state.active_object, ['data']: 'data1modified' } }
    ))
  }

  render() {
    return (
      <div className="App">
        <p onClick={ () => this.modifyState() }>modify</p>
        <p>{ this.state.object1.data }</p>
      </div>
    );
  }

}

编辑:我已经更新了示例以使用构造函数以免混淆人们(我正在使用 babel，所以实际上并不需要)。另外，我在评论中更清楚地表明我正在使用功能性 setState(也不要让人们感到困惑)。我需要澄清的是，我不需要帮助来让这段特定代码正常工作，更多的是展示我能够做什么。在这方面，它是伪代码，即使如果您在 react 中运行它实际上工作得很好(除了引用丢失，如预期的那样)。

EDIT2:正如 vs1682 在这个问题的评论中指出的那样，在复制对象时使用对象扩展运算符会丢失引用。所以这个问题并不是真正特定于 react 的(只是间接的)。

Answer 1

也许这是一个严重的拼写错误，但您没有构造函数。如果您不明白为什么需要它，也许您应该回到基础知识并阅读一些有关 JavaScript ES6 的内容。

constructor(props) {
  super(props)
  this.state = {
    active_object: null,
    object1: { 'data': 'data1'},
  }
}

this.setState 不接受回调作为其主要参数...或者至少这不是惯例。 this.setState 可以接受回调作为辅助参数，但这是为了处理 this.setState 的异步性质。它并不明确用于更改状态。

this.setState({ active_object: this.state.object1 })

此外，JavaScript 约定强烈鼓励使用驼峰命名法，而不是下划线。

编辑:我错了。可以在 this.setState 中使用函数。事实上，这可能是一个很好的主意。