Как получить доступ к предыдущему состоянию и использовать его для обновления только некоторых свойств объекта в одном вызове установщика состояния?

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

Это выдает ошибку линтера. Какой правильный синтаксис использовать для доступа к предыдущему состоянию и обновления свойства объекта в состоянии, используя предыдущее состояние в качестве основы для этого обновления?

Answer 1

Ваш обратный вызов, переданный в 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 };
});

Answer 2

Установщик состояний ожидает объект

попробуйте это:

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