React：如何更新属性相互依赖的state对象？

你当前的问题在于：直接使用...tableStates扩展旧状态时，对象里所有新属性的计算都是基于更新前的旧state值，所以新计算的indexOfLastItem并不会被后面的indexOfFirstItem和currentItems用到——因为tableStates还是旧的状态对象，不是刚更新后的。

正确的做法是使用useState的函数式更新，它会接收上一次的最新状态作为参数，你可以在函数内部先计算所有依赖的中间值，再返回完整的新状态对象：

setTableStates(prevState => {
  // 先基于旧状态计算最新的indexOfLastItem
  const newIndexOfLastItem = prevState.currentPage * itemsPerPage;
  // 用刚算出的newIndexOfLastItem计算indexOfFirstItem
  const newIndexOfFirstItem = newIndexOfLastItem - itemsPerPage < 0 ? 0 : newIndexOfLastItem - itemsPerPage;
  // 再用新的首尾索引计算currentItems
  const newCurrentItems = props.data.slice(newIndexOfFirstItem, newIndexOfLastItem);

  // 返回完整的新状态对象
  return {
    ...prevState,
    indexOfLastItem: newIndexOfLastItem,
    indexOfFirstItem: newIndexOfFirstItem,
    currentItems: newCurrentItems
  };
});

为什么这样有效？ #

1. 函数式更新会确保你拿到的prevState是当前最新的状态值，避免了异步更新导致的旧值问题。
2. 在函数内部先把所有依赖的中间值计算好，后续属性直接使用刚算出的最新值，保证了属性间的依赖关系能正确生效。

另外，你之前尝试拆分单独状态没成功，是因为React的状态更新是异步批量处理的，依次更新时后面的状态更新依然会读取旧值，而用函数式更新+统一的状态对象，能一次性完成所有依赖属性的同步更新。

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