如何访问以前的状态，并使用它在单个状态设置器调用中仅更新某些对象属性？

Posted 2023-02-22

我以前是这样更新状态的：

  const [currentTime, setCurrentTime] = useState(callLength);
  const [timeLeft, setTimeLeft] = useState(callLength);
  setCurrentTime(current);
  setTimeLeft(prevState => prevState - 1000);

但是这会导致两个渲染。因此，我将这些属性合并到一个对象中，因此只需要执行一个状态更新：

  const [timeData, setTimeData] = useState(
    currentTime: callLength,
    timeLeft: callLength,
  );

但是我访问先前状态的尝试现在无法以相同的方式起作用：

setTimeData(prevState => currentTime: current, timeLeft: prevState.timeLeft - 1000 );

这会引发棉绒错误。使用先前状态作为该更新的基础来访问先前状态并更新状态下的对象属性的正确语法是什么？

答案

状态设置器期望一个对象

尝试一下：

setTimeData(prevState => ( currentTime: current, timeLeft: prevState.timeLeft - 1000 ));

另一答案

您在setTimeData中传递的回调返回void而不是状态。

setTimeData(prevState => currentTime: current, timeLeft: prevState.timeLeft - 1000 );

您应该输入：

setTimeData(prevState => ( currentTime: current, timeLeft: prevState.timeLeft - 1000 ));

或

setTimeData(prevState => 
  return  currentTime: current, timeLeft: prevState.timeLeft - 1000 ;
);