当 useSelector() 值改变时组件刷新

编程问答 2022-04-28

问题描述

我有一个 react-editor-js 实例，允许用户输入一些博客内容。我的表单提交按钮在标题上而不是在表单正文上。因此，我使用 redux 来让我的表单中知道这些按钮点击。

单击按钮时，我的 redux 中的 isPublishing 值会发生变化。我的表单正在使用 const p = isPublishing(state=> state.test.isPublishing) 侦听此组件。

在这种情况下刷新是邪恶的，因为它会重置我的 EditorJs 表单数据。如果我可以在不刷新页面的情况下聆听更改，那就太棒了。我怎样才能实现它？ 提前致谢！

解决方法

感谢@Shyam 提供的解决方案。

我对 useState 和 props 导致渲染的假设是正确的。没有直接的方法可以避免它。

我在我的项目中使用了 react-editor-js，这就是导致问题的原因

  <EditorJs
    instanceRef={()=>{//code to save the reference as state variable}}
    enableReInitialize
    data={{}}
    tools={EDITOR_JS_TOOLS}
  />

状态丢失的原因是每次组件呈现时都会重新分配我的 instanceRef。

可以通过使用 useCallback() 包装方法以将引用保存为状态变量来防止这种重新分配

editorjsjavascriptreact-reduxreactjsreactjsreactjsreactjsreduxreduxreduxredux