React构造函数中如何实现state对象的自引用计算？

嘿，这个问题我可太熟了！你当前的写法肯定行不通——因为当你在state对象字面量里尝试访问this.state.a的时候，this.state还没有被赋值呢！毕竟这个对象字面量本身就是要赋值给this.state的，这时候this.state还是undefined，自然拿不到a和b的值。

下面给你几种靠谱的解决方案：

方案1：先定义独立变量，再组装state #

这是最直接简单的方式，先把a和b存在单独的变量里，计算result时直接用这些变量，完全不用依赖还没创建好的state对象：

constructor() {
  super();
  const a = 1;
  const b = 2;
  this.state = {
    a,
    b,
    result: a + b
  };
}

这种方式逻辑清晰，不管a、b是固定值还是从props里取的，都能完美适配。

方案2：将result设为派生属性（无需存在state中） #

如果result的值完全由state里的a和b决定，而且不需要单独修改result，那其实没必要把它存在state里，用类的getter属性动态计算就好，还能避免维护state一致性的麻烦（比如a或b更新时，result会自动同步）：

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      a: 1,
      b: 2
    };
  }

  // 定义一个getter，每次访问this.result时自动计算
  get result() {
    return this.state.a + this.state.b;
  }

  render() {
    // 使用的时候直接拿this.result就行
    return <div>计算结果：{this.result}</div>;
  }
}

方案3：构造函数内先设置基础state，再补充计算（不推荐，但可行） #

虽然不怎么推荐（因为有点多此一举），但如果你一定要先把a和b放进state再计算result，可以在构造函数里先赋值基础state，再用this.setState（不过注意：构造函数里通常直接赋值this.state，setState一般用于后续更新，但这里是初始阶段，也能运行）：

constructor() {
  super();
  this.state = {
    a: 1,
    b: 2
  };
  // 此时this.state已经存在，可以计算result了
  this.setState({
    result: this.state.a + this.state.b
  });
}

这种方式没必要，因为方案1更简洁，所以只做了解就行。

总的来说，方案1和方案2是最常用的，根据你的实际场景选就好：如果result是初始固定值，用方案1；如果result需要随a/b动态变化，用方案2更省心。

内容的提问来源于stack exchange，提问作者Adeel Imran