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

Question

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

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

我最初将这些值作为道具传递给SlateEditor组件，然后尝试直接从redux存储中读取子组件(SlateEditor)中的值。

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

Answer 1

我也有过类似的问题。相反，我有另一个(我的情况) editorsNamespaces=[....]数组，我还向Slate编辑器包装组件传递了一个选择器(即：selectSlateValueByEditorByNamespace)和一个onChangeHandler(newValue, nameSpace)。通过这样做，我的父组件将不会重新呈现所有编辑器，因为editorsNamespaces数组永远不会更改，并且只有特定的编辑器会在值发生更改时重新呈现。