Несколько редакторов Slate.js / предотвращают повторный рендеринг родительского компонента

Question

Я пытаюсь добавить несколько полей текстового редактора Slate.js на одну страницу. Пока что мой основной компонент содержит кнопку, которая при нажатии добавляет значение slate к массиву slateValues ​​в моем магазине приставок. В функции рендеринга я затем отображаю этот массив и для каждой записи возвращаю компонент SlateEditor, который, по сути, визуализирует стандартный компонент Slate Editor с некоторым пользовательским форматированием / функциональностью.

Моя проблема в том, что Slate использует функцию onChange для обработки изменений значения. Обработка этих изменений в локальном состоянии работает нормально, но как я могу передать это в хранилище избыточностей? Обновление избыточного хранилища непосредственно в onChange приводит к повторному рендерингу родительского компонента, который затем заканчивается бесконечным циклом (я полагаю, что затем он снова запускает onChange, который запускает рендеринг и т. Д.).

Сначала я передавал значения в качестве реквизитов в компонент SlateEditor, затем попытался напрямую прочитать значение в дочернем компоненте (SlateEditor) из хранилища с избыточностью.

Моя последняя цель - сохранить slateValues ​​в виде «блока» в базе данных. Любые идеи о том, как это исправить? Спасибо

Answer 1

У меня была похожая проблема. Что я сделал, так это то, что я не отобразил массив значений сланца. Вместо этого у меня был другой массив (мой случай) editorsNamespaces=[....], и я передаю компоненту-редактору Slate селектор (то есть: selectSlateValueByEditorByNamespace) и onChangeHandler(newValue, nameSpace). При этом мой родительский компонент не будет повторно отображать весь редактор, потому что массив editorsNamespaces никогда не изменится, и только определенный редактор будет отображать повторно при изменении значения.