Question

我的父组件上有一个按钮，子组件中有一个第三方表单。当用户单击按钮时，子组件中的保存功能应该运行。这是我的计划。

我尝试过的方法 1： 1.在父级上创建了一个名为 save 的变量。 2.当按钮被点击时，保存变为真 3.保存作为道具传递给孩子 4. Child 包含一个 useEffect() 来监听 props.save 中的变化 5.如果props.save为true，子组件的save函数运行

我试过的方法二：

我没有传递 props，而是创建了一个 react-redux 存储。
商店包含默认为 false 的保存变量
当按钮被点击时，在 redux 中保存为真
我使用 useSelector() 钩子来监听子组件内部的保存变量变化
UseEffect 用于在检测到值更改时运行 save() 函数

这两种方法发生的情况是我丢失了子组件中的数据，因为父组件中的变量更改导致页面刷新。因此，我想将数据传递给孩子，而不会导致重新渲染。我有哪些选择？

提前致谢

Answer 1

感谢@Shyam，我终于可以解决这个问题了！

我对 useState 和 props 导致渲染的假设是正确的。正如@Shyam 建议的那样，没有直接的方法可以避免它。

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

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

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

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

将父级反应到子道具传递而无需重新渲染

1 个答案: