reactjs - 多个 Slate.js 编辑器/防止 redux 重新渲染父组件

Question

我正在尝试将多个 Slate.js 文本编辑器字段添加到一页中。到目前为止，我的主要组件包含一个按钮，单击该按钮会在我的 redux 存储中将 slate 值附加到数组 slateValues 中。然后在渲染函数中映射该数组，并为每个条目返回一个 SlateEditor 组件，该组件本质上呈现具有一些自定义格式/功能的标准 Slate 编辑器组件。

我的问题是 Slate 使用 onChange 函数来处理对值的更改。处理本地状态中的这些更改可以正常工作，但是如何将其传递到 redux 存储中？直接在 onChange 中更新 redux 存储会导致父组件重新渲染，然后以无限循环结束（我假设这会再次触发 onChange，从而触发重新渲染等）。

我最初将值作为 props 传递到 SlateEditor 组件中，然后尝试直接从 redux 存储中读取子组件（SlateEditor）中的值。

我的最终目标是将 slateValues 作为“块”存储在数据库中。有想法该怎么解决这个吗？谢谢

Answer 1

我有类似的问题。我所做的是我没有映射到 slate 值数组。相反，我有另一个数组（我的情况），我editorsNamespaces=[....]也将一个选择器（即：）selectSlateValueByEditorByNamespace和一个onChangeHandler(newValue, nameSpace). 通过这样做，我的父组件将不会重新渲染所有编辑器，因为editorsNamespaces数组永远不会改变，并且只有特定的编辑器会在值改变时重新渲染。