React状态对象中如何基于其他属性计算派生属性？

你遇到的核心问题是：在初始化useState的对象字面量时，无法直接引用同一对象内的cols和rows属性——因为对象在创建过程中，内部属性还未被挂载到对象上，所以直接写cols * rows会报未定义错误，原生JS对象的类似写法本身也不生效，并非React特有的问题。

以下是几种可行的解决方式：

1. 提前定义初始变量 #

先把固定的初始值提取出来，再用这些变量计算numOfCells：

const initialCols = 10;
const initialRows = 10;

const [gameSpecs, setGameSpecs] = useState({
  cols: initialCols,
  rows: initialRows,
  numOfCells: initialCols * initialRows,
});

这种方式适合初始值固定、不需要动态计算的场景。

2. 使用函数式初始化 #

如果初始值需要动态生成（比如从props获取），可以用useState的函数式初始化，在函数内部定义变量并计算：

const [gameSpecs, setGameSpecs] = useState(() => {
  const cols = 10; // 这里也可以换成props传入的值，比如props.initialCols
  const rows = 10;
  return {
    cols,
    rows,
    numOfCells: cols * rows,
  };
});

函数式初始化只会在组件首次渲染时执行一次，避免重复计算。

3. 更新时同步计算numOfCells #

如果后续需要修改cols或rows，要确保numOfCells同步更新，此时需要使用setGameSpecs的函数式更新，依赖之前的状态计算新值：

// 修改列数的示例
const setNewCols = (newCols) => {
  setGameSpecs(prevState => ({
    ...prevState,
    cols: newCols,
    numOfCells: newCols * prevState.rows,
  }));
};

// 修改行数的示例
const setNewRows = (newRows) => {
  setGameSpecs(prevState => ({
    ...prevState,
    rows: newRows,
    numOfCells: prevState.cols * newRows,
  }));
};

这种方式能保证每次状态更新时，numOfCells都和最新的cols、rows保持一致。

内容的提问来源于stack exchange，提问作者Michael K