Состояние реакции не обновляется после однократного изменения через обработчик событий

Question

У меня есть простое состояние для обработки того, сколько перезаписей может сделать пользователь,

const [retakes, setRetakes] = useState(0);
  const onRerecord = () => {
    console.log(retakes + 1, "rere");
    setRetakes(retakes + 1);
  };

onRerecord срабатывает каждый раз, когда пользователь запрашивает перезапись из react-ziggeo: перезаписи

<ZiggeoRecorder
          apiKey={process.env.ZIGGEO_API_TOKEN}
          video={videoToken}
          onProcessed={onProcessed}
          recordings={3}
          onRerecord={onRerecord}
        />

При первой перезаписи состояние обновляется просто отлично, однако после этого состояние остается прежним, оно просто не изменилось, вы можете увидеть здесь, как console.log s для 1 "rere" всегда одинаков.

Answer 1

Попробуйте - обновить предыдущее состояние.

const [retakes, setRetakes] = useState(0);
  const onRerecord = () => {
    console.log(retakes + 1, "rere");
    setRetakes(retakes => retakes + 1);
  };

Answer 2

ZiggeoRecorder, по-видимому, кэширует первую ссылку onRerecord и впоследствии использует тот же экземпляр.

А когда ваш onRerecord закрывает retakes, он всегда использует одно и то же значение в будущем вызовы:

Вы можете использовать функциональное изменение useState, чтобы обойти эту проблему:

setRetakes(retakes => retakes + 1);