如何在不使用 useMemo 的情况下使 jodit textarea 动态化

Question

我用 jodit-react 做了一个文本编辑器。但只要我在文本输入中输入一个值，焦点就会被禁用。

{contentFromApi && (
    <JoditEditor
       value={contentFromApi}
       config={config}
       onChange={handleTextAreaChange}
    />
)}

我这样做时遇到了我提到的问题。

功能：

const handleTextAreaChange = (newTextAreaValue) => {
    setContentFromApi(newTextAreaValue);
};

状态和获取

const { data, error } = useSWR('..');

const [contentFromApi, setContentFromApi] = useState();

我的尝试：

{React.useMemo(() => {
    return (
        <JoditEditor
             value={contentFromApi}
             config={config}
             onChange={handleTextAreaChange}
        />
    );
}, [])}

如果我这样做，'contentFromApi' 数据不会放在文本编辑器中，因为它来自 api。如果我强制代码等待来自 api 的数据，我会收到 React 的“渲染过多”错误。

我想要的是，当组件第一次渲染时，来自 api 的文本数据出现在文本编辑器中，并且可以以健康的方式进行更改。我该怎么做？

Answer 1

export default function App() {
  const [contentFromApi, setContentFromApi] = useState("");

  useEffect(() => {
    setTimeout(() => {
      setContentFromApi("DATA FROM API");
    }, 1000);
  }, []);

  const handleTextAreaChange = (newTextAreaValue) => {
    setContentFromApi(newTextAreaValue);
  };

  return (
    <div className="App">
      test:
      <input
        disabled={contentFromApi.length === 0}
        onChange={handleTextAreaChange}
        value={contentFromApi}
      />
    </div>
  );
}