Javascript react中的引用状态

保留对特定或活动对象的引用是我在许多情况下使用的一种模式，用于对对象数组中的特定对象或您拥有的其他对象进行更改

状态={ object1:{'data'：'data1'}， 活动对象：空， } //将活动对象指向object1 state.active_object=state.object1； //通过引用修改它 state.active_object.data='data1modified'； //工作如期进行

---

console.log'object1.data:'+state.object1.data 也许这是一个惊人的输入错误，但你没有一个构造函数。如果您不明白为什么需要一个，也许您应该回到基础知识，阅读一些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约定高度支持大小写，而不是下划线

---

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

向您证明，如果您对同一对象中的属性有引用，例如在问题中的情况下，您可以执行深度复制。这将重新链接我不确定这里引用的术语，即使新对象返回了新内容

这种方法的唯一缺点是，到达您要克隆的对象外部的引用将不会被保留，而在使用对象扩展或不可变助手的浅拷贝中，它会被保留，因为它根本不会修改引用。但这一特定的问题可能与此有关

无论如何，这是可行的，但我不知道性能的含义，或者考虑到react和state的功能性质，这是否是一个好的实践

import React, { Component } from 'react';
import clone from 'clone';

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

  modifyState() {
    // point activeObject to object1
    this.setState((state) => {
      let newState = clone(state);
      newState.activeObject = newState.object1;
      return newState;
    })
    // modify it through the reference
    this.setState((state) => {
      let newState = clone(state);
      newState.activeObject.data = 'data1-modified';
      return newState;
  })
  }

  render() {
    return (
      <div className="App">
        <p onClick={ () => this.modifyState() }>modify</p>
        {/* will show 'data1-modified' after modifyState */}
        <p>{ this.state.object1.data }</p>
      </div>
    );
  }

}

也许应该说，克隆带有引用的对象总是一件棘手的事情，而且通常不需要设置专门用于复制对象或数据结构的特殊方法，而不是仅依靠浅/深复制。在我的例子中，我认为一个普通的浅层拷贝和一个恢复引用的处理程序将是最好的方法

---

或者，完全跳过引用，并依赖唯一的对象属性（如和活动标识符）或id来替换此场景中麻烦的引用。我怀疑，在依赖按值复制和不变性的语言中，不可变状态的react模型来自于这些语言，这不是一个问题，因为不总是缺少对象/值引用，而是经常缺少对象/值引用。

保留对特定对象的引用不是一种设计模式，它只是一种实践。尝试使用redux来管理状态。为了解决您的问题，请添加一个构造函数并在那里设置您的状态。然后使用setState在classactive_对象的其他方法中更新它：{…state.active_对象，['data']：'data1modified'}。在这里，您可以通过展开活动的_对象并添加新的属性数据来创建一个全新的对象。这样你就失去了参考资料。@Qurimmo谢谢你的提示。我一直在避免使用redux，因为我真的想在转向第三方帮助程序和抽象之前尽可能多地了解react。@vs1682您似乎是对的！Thanke.re：首先，他们可能使用了Babel的类属性，在这种情况下不需要构造函数。检查并确认可能的情况，是的，但仍有一些需要指出的问题，以防这是一个如此简单的解决方案。如果是这样的话，我相信他/她会告诉我们的。对不起，我应该更清楚这一点！我确实在使用babel的类属性。作为一个新手，我不太清楚什么是标准，什么不是。