Reactjs 为什么编辑器字段不以react钩子形式呈现最近的数据

我在模态弹出窗口中使用react钩子表单，在编辑表单中呈现tinymce编辑器内容时遇到了问题。当第一次打开弹出窗口时，它工作正常，但当关闭该弹出窗口并打开其他记录时，它会呈现旧数据

这是mycode：

import TextEditor from '../utils/Editor';

const EditData = props => {

    const uuid = uuidv4();

      const [templateData, setSubmittedTemplate] = useState({});

      const [formData, setFormData] = useState({
        subject: '',
        content: ''
      });

      const { subject, content} = formData;
      const {
        register,
        handleSubmit,
        control,
        errors,
        reset,
        setValue,
        getValues,
        formState: { isSubmitSuccessful }
      } = useForm({ resolver: yupResolver(schema), defaultValues: formData});
      
      const onUpdateData = async(values) => {
        //api to update
      };

      

      useEffect(() => {
          if(props.temp_id){
            api.get(`/api/data/${props.temp_id}`)
            .then(response => {
                setFormData(response.data);
                setValue('subject',response.data.subject);
                setValue('content',response.data.content);
            });
        }
      }, [props.temp_id, reset]);

      
    return (
        <Modal show={props.modalState} onHide={() => props.onHide('editData')}>
                <Form onSubmit={handleSubmit(onUpdateData)}>
                    <Modal.Header closeButton>
                        <div>
                            <Modal.Title>Edit</Modal.Title>
                        </div>
                    </Modal.Header>
                    <Modal.Body>
                        <Form.Row>
                            <Form.Group as={Col} controlId="subject">
                                <Form.Label className="floating-label">Subject</Form.Label>
                                <Form.Control type="text" name="subject" className="custom_input" ref={register}></Form.Control>
                                {errors.subject && <label className="error">{errors.subject?.message}</label>}
                            </Form.Group>
                        </Form.Row>

                        <Form.Row>
                            <Form.Group as={Col} controlId="content">
                                <Form.Label className="floating-label">Content</Form.Label>
                                <Controller
                                    control={control}
                                    name="content"
                                    defaultValue={formData.content}
                                    render={({ onChange, value}) => (
                                        <TextEditor onChange={onChange} initialvalue={value} register={register} />
                                    )}
                                />
                                 {errors.content && <label className="error">{errors.content?.message}</label>}
                            </Form.Group>
                        </Form.Row>

                    </Modal.Body>
                    <Modal.Footer>
                    <Button varient="primary" className="pl-4 pr-4" type="submit">Update</Button>
                    </Modal.Footer>
                </Form>
            </Modal>
    );
}

export default EditData;

从“../utils/Editor”导入TextEditor；
const EditData=props=>{
常量uuid=uuidv4（）；
const[templateData，setSubmittedTemplate]=useState（{}）；
常量[formData，setFormData]=useState({
主题：''，
内容：“”
});
const{subject，content}=formData；
常数{
登记
手推，
控制
错误，
重置，
设置值，
获取值，
formState:{isSubmitSuccessful}
}=useForm（{resolver:yupResolver（schema），defaultValues:formData}）；
const onUpdateData=async（值）=>{
//要更新的api
};
useffect（（）=>{
if（道具临时id）{
get（`/api/data/${props.temp\u id}`）
。然后（响应=>{
setFormData（response.data）；
setValue（'subject'，response.data.subject）；
setValue（'content'，response.data.content）；
});
}
}，[props.temp_id，重置]；
返回(
props.onHide（'editData'）}>
编辑
主题
{errors.subject&&{errors.subject？.message}
内容
(
)}
/>
{errors.content&&{errors.content？.message}
更新
);
}
导出默认编辑数据；

TextEditor具有tinyMCE配置代码：

const TextEditor = props => {

    return (
        <Editor
            className="custom_input"
            ref={props.register}
            initialValue={props.initialvalue}
            init={{
            height: 300,
            menubar: false,
            statusbar:false,
            //inline:true,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code'
            ],
            toolbar:
                'undo redo | formatselect | bold italic | placeholder | forecolor backcolor |  \
                alignleft aligncenter alignright alignjustify | \
                bullist numlist outdent indent | code | removeformat',
            setup: function (editor) {
                //
                }
            }}
            onEditorChange={props.onChange}

        />
    )
}
export default TextEditor;

const TextEditor=props=>{
返回(
)
}
导出默认文本编辑器；

请让我知道遗漏了什么或有什么工作，这样编辑器就不会更新最近的数据，而其他表单字段（如主题）工作正常。

---

谢谢。

您需要添加两个更改，第一个是您需要将onChange包装在回调中，第二个是您应该将来自控制器组件的值prop作为值prop在编辑器中传递，而不是initialValue prop

const TextEditor = props => {
 const handleEditorChange = (editor) => props.onChange(editor);

 return (
    <Editor
        className="custom_input"
        value={props.initialvalue}
        init={{
        height: 300,
        menubar: false,
        statusbar:false,
        //inline:true,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code'
        ],
        toolbar:
            'undo redo | formatselect | bold italic | placeholder | forecolor backcolor |  \
            alignleft aligncenter alignright alignjustify | \
            bullist numlist outdent indent | code | removeformat',
        setup: function (editor) {
            //
            }
        }}
        onEditorChange={handleEditorChange}

    />
 )
}

const TextEditor=props=>{
consthandleeditorchange=（编辑器）=>props.onChange（编辑器）；
返回(
)
}

通过这样做，您可以在useffect中使用react hook表单的setValue函数来设置编辑器内容。您也不需要向TextEditor组件传递寄存器，因为控制器正在处理表单状态更改

下面是一个工作沙箱，向您展示它是如何工作的：

---

谢谢@jean182，它工作正常。再次感谢您不客气，请您将此标记为答案。您好@jean182，我不想使用tiny cloud，您知道如何使用自托管的react实现吗？我想您可以使用另一个不需要许可证的富文本编辑器，我通常使用react quill，因为它是免费的，但不如tinymce好