能否基于对象的兄弟属性定义属性值？代码实现合理性咨询

嘿，这个问题问到点子上了！咱们直接说结论：你这样的写法完全不可行，而且会直接触发报错，我给你把原因和正确做法都讲清楚～

为什么你的写法不行？ #

• 首先，初始化state的时候，this.state还没被创建出来呢！当你写viewValue: (this.state.viewIndex * this.state.travelerIndex)时，this.state处于未定义状态，根本访问不到里面的viewIndex和travelerIndex，浏览器会直接抛出类似 Cannot read properties of undefined (reading 'viewIndex') 的错误。
• 退一步说，就算能访问到，这种设计本身也不符合React的state理念：viewValue是完全由另外两个状态计算出来的派生值，把它塞进state里会造成冗余，还极易引发状态不一致的问题——比如你更新了viewIndex但忘了同步更新viewValue，页面上的数值就会和实际逻辑脱节。

正确的处理方式 #

根据你的使用场景，有几种推荐的做法：

1. 渲染时直接计算（最简单）
   如果这个值只在渲染环节用到，直接在渲染逻辑里计算就行，不用放到state里：

// 类组件写法
class YourComponent extends React.Component {
  state = {
    viewIndex: 0,
    travelerIndex: 100
  };

  render() {
    const { viewIndex, travelerIndex } = this.state;
    const viewValue = viewIndex * travelerIndex;
    return <div>计算结果：{viewValue}</div>;
  }
}

// 函数组件写法
const YourComponent = () => {
  const [viewIndex, setViewIndex] = useState(0);
  const [travelerIndex, setTravelerIndex] = useState(100);
  const viewValue = viewIndex * travelerIndex;
  
  return <div>计算结果：{viewValue}</div>;
};

2. 用useMemo缓存复杂计算（函数组件）
   如果viewValue的计算逻辑很复杂，或者需要在多个地方复用，可以用useMemo缓存计算结果，避免每次渲染都重复计算：

const YourComponent = () => {
  const [viewIndex, setViewIndex] = useState(0);
  const [travelerIndex, setTravelerIndex] = useState(100);
  
  const viewValue = useMemo(() => {
    // 这里可以写复杂的计算逻辑
    return viewIndex * travelerIndex;
  }, [viewIndex, travelerIndex]); // 只有依赖项变化时才重新计算

  return <div>计算结果：{viewValue}</div>;
};

3. 类组件用getter方法复用
   如果类组件里需要多次调用这个计算值，可以定义一个getter属性，每次访问时都会实时计算：

class YourComponent extends React.Component {
  state = {
    viewIndex: 0,
    travelerIndex: 100
  };

  get viewValue() {
    return this.state.viewIndex * this.state.travelerIndex;
  }

  render() {
    return (
      <div>
        计算结果：{this.viewValue}
        <button onClick={() => this.setState({ viewIndex: this.state.viewIndex + 1 })}>
          增加viewIndex
        </button>
      </div>
    );
  }
}

关键提示 #

永远记住React的一个核心原则：能通过现有state/props计算出来的值，就不要放到state里。这样能保证状态的单一数据源，减少维护成本，也能避免很多莫名其妙的状态不一致bug。

内容的提问来源于stack exchange，提问作者Diagathe Josué