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

Question

我之前更新的状态如下：

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 });

这引发了一个linter错误。访问以前的状态并使用以前的状态作为更新的基础来更新状态中的对象属性，正确的语法是什么？

Answer 1

状态设置程序需要一个对象

试试这个：

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

Answer 2

在setTimeData中传递的回调返回void而不是state。

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 };
});