通过事件处理程序更改一次后，反应状态不会更新

Question

我有一个简单的状态来处理用户可以重新记录多少次，

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

每次用户要求从 react-ziggeo 重新录制时 onRerecord 都会触发：rerecordings

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

第一次重新记录状态更新就好了，但是之后状态仍然相同，它根本没有改变，你可以在这里看到 console.logs 是如何为 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);

通过事件处理程序更改一次后，反应状态不会更新

React state not updating after one time change through event handler

reactjs

ziggeo-sdk

ziggeo-api