在设置状态时使用带有 react-hook-form 无限循环的 React tinymce答案

【问题标题】：Using React tinymce with react-hook-form infinite loop while setting the state在设置状态时使用带有 react-hook-form 无限循环的 React tinymce
【发布时间】：2021-10-21 12:16:29
【问题描述】：

当用户输入 react tinymce 编辑器时，我正在尝试使用 react-hook-form 附带的 setValue 函数来存储编辑器中输入的 html 数据： https://react-hook-form.com/api/useform/setvalue/.

使用 onClick 按钮时效果很好，当我单击按钮时，使用 htmlContent 使用 setValue 函数存储从 tinymce 编辑器键入的 html 数据。

但是，当我尝试使用 onEditorChange 或带有 setValue 的 onChange 函数时，react tinymce 编辑器不允许我输入它并且应用程序崩溃，我收到了大约 5000 个控制台错误，这些错误在几秒钟内不断增加'与组件无关，它以非常快的速度不断复制有关来自另一个组件的重复键的错误。

尝试在提供的 onEditorChange 中使用 setValue 或使用 onChange 函数时，它似乎正在执行无限循环并崩溃，但在使用按钮的相同逻辑 onClick 时工作正常。

import React, { useState } from 'react'
import { Editor } from '@tinymce/tinymce-react'
import { useFormContext } from 'react-hook-form'
import { HtmlEditorWrapper } from './HtmlEditor.styles'

type HtmlEditorProps = {
    name: string
}

export const HtmlEditorComponent = ({ name }: HtmlEditorProps): JSX.Element => {
    const [htmlContent, setHtmlContent] = useState('')
    const { setValue } = useFormContext()

    return (
        <>
            <HtmlEditorWrapper>
                <Editor
                    value={htmlContent}
                    apiKey={process.env.REACT_APP_TINYMCE_KEY}
                    onEditorChange={(content: string) => {
                        setHtmlContent(content)
                        // setValue(name, content)
                    }}
                    // onChange={() => setValue(name, htmlContent)}}
                    init={{
                        height: 200,
                        menubar: false,
                        plugins: [
                            'advlist autolink lists link image charmap print preview anchor',
                            'searchreplace visualblocks code fullscreen',
                            'insertdatetime media table paste code help wordcount',
                        ],
                        toolbar:
                            'undo redo | formatselect | ' +
                            'bold italic backcolor | alignleft aligncenter ' +
                            'alignright alignjustify | bullist numlist outdent indent | ' +
                            'removeformat | help',
                        content_style:
                            'body { font-family:Helvetica,Arial,sans-serif; font-size:14px, }',
                    }}
                />

                <button onClick={() => setValue(name, htmlContent)}>
                    Save desc
                </button>
                {htmlContent}
            </HtmlEditorWrapper>
        </>
    )
}

【问题讨论】：

标签： reactjs tinymce react-hook-form

【解决方案1】：

这是一个带有演示密钥的工作示例：https://codesandbox.io/s/stupefied-sutherland-09eh2

有几种方法可以实现您想要的。其中之一是使用Controller 或useController。

【讨论】：