多个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数组将永远不会改变，并且只有特定的编辑器才能在值更改时重新渲染。