React：更新哪些属性依赖于另一个属性的状态对象

Question

我创建了一个状态对象

const [tableStates, setTableStates] = useState<TableStates>({
currentPage: 1,
indexOfLastItem: indexOfLastItem,
indexOfFirstItem: indexOfFirstItem,
currentItems: props.data.slice(indexOfFirstItem, indexOfLastItem),
  })

现在我想更新这个状态对象，同时它的属性相互依赖：

setTableStates({
  ...tableStates,
  indexOfLastItem: tableStates.currentPage * itemsPerPage,
  indexOfFirstItem: tableStates.indexOfLastItem - itemsPerPage < 0 ? 0 : tableStates.indexOfLastItem - itemsPerPage,
  currentItems: props.data.slice(tableStates.indexOfFirstItem, tableStates.indexOfLastItem),
})

然而，这不起作用。虽然第一个属性已更新，但所有其他属性均未更新。我该如何解决这个问题？

我尝试为每个变量创建状态并按顺序更新状态，但没有成功。有人告诉我创建一个状态对象。实现这样一个具有依赖状态的状态对象的正确方法是什么？

Answer 1

在这一行

indexOfFirstItem: tableStates.indexOfLastItem - itemsPerPage < 0 ? 0 : tableStates.indexOfLastItem - itemsPerPage,

您正在尝试使用

tableStates.indexOfLastItem

值来计算

indexOfFirstItem

值，但是

tableStates.indexOfLastItem

指的是它之前的值，而不是您在上面一行中设置的新值。 你可以这样做：

const newIndexOfLastItem = tableStates.currentPage * itemsPerPage
const newIndexOfFirstItem = newIndexOfLastItem - itemsPerPage < 0 ? 0 : newIndexOfLastItem - itemsPerPage
setTableStates({
  ...tableStates,
  indexOfLastItem: newIndexOfLastItem,
  indexOfFirstItem: newIndexOfFirstItem,
  currentItems: props.data.slice(newIndexOfFirstItem, newIndexOfLastItem),
})