react-hook-form Controller 将适当的道具延迟传递给 WYSIWYG 组件

如何解决react-hook-form Controller 将适当的道具延迟传递给 WYSIWYG 组件

我正在使用 react-hook-form 和 react-draft-wysiwyg。用户应该编辑和保存带有 html 字符串的元素。

Controller 延迟传递 props，所以它传递的不是正确的值，而是传递 undefined（第一次点击元素时）或前一个值（第二次点击时）。

对于第一种情况，我找到了一些解决方法（请参阅评论），但仍然存在第二种情况。

如何通过立即传递适当的道具使其工作？

    ...
    videofmtp = "packetization-mode=1"
    ...

import React from "react";
import { Controller,UseFormMethods } from "react-hook-form";
import { WYSIWYGEditor } from "./wysiwyg-editor.component";

type Props = {
  name: string;
  control: UseFormMethods["control"];
};
export function RichTextWysiwyg(props: Props) {
  return (
    <Controller
      name={props.name}
      control={props.control}
      render={(event: any) => {
        //somehow props is not immediately passed to WYSIWYGEditor component so I added the condition below
        if (event.value !== undefined) {
          return <WYSIWYGEditor value={event.value} onChange={event.onChange} />
        }
        return <div/>
      }}
    />
  );
}