javascript - Draft JS 编辑器在父组件更改其值时不更新其内容？

Question

我有一个简单的用例:有一个 DraftEditor 组件，它采用 value作为它的 Prop 并基于value创建一个编辑器状态(空的或有内容的)。 value 可能被父级更改，当它发生时，我希望草稿编辑器也更新它的内容。这是我的DraftEditor零件。

import React, { useState } from "react";
import { Editor, EditorState, convertFromRaw } from "draft-js";

export default ({ value }) => {
  const initialState = value
    ? EditorState.createWithContent(convertFromRaw(JSON.parse(value)))
    : EditorState.createEmpty();
  const [editorState, setEditorState] = useState(initialState);

  return <Editor editorState={editorState} onChange={setEditorState} />;
};

问题:当 value由父组件更新， Editor 的内容没有得到更新。相反，它只显示它初始化的内容。我找到的解决方法是手动调用 setEditorState当 value更改，但我觉得这一步是不必要的，因为当组件重新渲染时，我希望编辑器也重新计算它的内部状态？可能我在这里遗漏了什么？

知道为什么 Editor不更新它的内部状态？

这是一个代码沙箱: https://codesandbox.io/s/xenodochial-sanderson-i95vd?fontsize=14&hidenavigation=1&theme=dark

Answer 1

基本问题是

const [editorState, setEditorState] = useState(initialState);

使用它的参数 initialState仅一次(在初始运行时)，无论多少次 initialState变化。

使用 useState() 时并且有一个 prop(或其他)依赖项，将其与 useEffect() 配对使事物具有反应性。

这可能看起来有点倒退，但是很多(大部分)钩子(Hook)都是关于在重新运行 Function 组件时保持相同的东西。所以 useState()仅更新 editorState通过 setEditorState ，在初次通话后。

import React, { useState, useEffect } from "react";
import { Editor, EditorState, convertFromRaw } from "draft-js";

export default ({ value }) => {

  const [editorState, setEditorState] = useState();

  useEffect(() => {
    const state = value
      ? EditorState.createWithContent(convertFromRaw(JSON.parse(value)))
      : EditorState.createEmpty();
    setEditorState(state);
  }, [value]); // add 'value' to the dependency list to recalculate state when value changes.

  return <Editor editorState={editorState} onChange={setEditorState} />;
};

在上面的代码中，editorState 在初始组件调用时将为空。如果这是 Editor 的问题组件，您可以将状态计算外部化在函数中并调用它为 useState()在 useEffect() 内.

import React, { useState, useEffect } from "react";
import { Editor, EditorState, convertFromRaw } from "draft-js";

export default ({ value }) => {

  const [editorState, setEditorState] = useState(calcState(value));

  useEffect(() => {
    setEditorState(calcState(value));
  }, [value]); // add 'value' to the dependency list to recalculate state when value changes.

  return <Editor editorState={editorState} onChange={setEditorState} />;
};

const calcState = (value) => {
  return value
    ? EditorState.createWithContent(convertFromRaw(JSON.parse(value)))
    : EditorState.createEmpty();
}

由于这两个钩子(Hook)经常一起使用，我倾向于将它们配对在一个自定义钩子(Hook)中以封装细节。

不同的是，每次组件运行时都会运行自定义 Hook ，但 editorState仍然仅在值更改时更新。

定制 Hook

import React, { useState, useEffect } from "react";
import { EditorState, convertFromRaw } from "draft-js";

export const useConvertEditorState = (value) => {

  const [editorState, setEditorState] = useState(calcState(value));

  useEffect(() => {
    setEditorState(calcState(value));
  }, [value]); 

  return [editorState, setEditorState];
}

const calcState = (value) => {
  return value
    ? EditorState.createWithContent(convertFromRaw(JSON.parse(value)))
    : EditorState.createEmpty();
}

组件

import React, { useState, useEffect } from "react";
import { Editor } from "draft-js";
import { useConvertEditorState } from './useConvertEditorState'

export default ({ value }) => {

  const [editorState, setEditorState] = useConvertEditorState(value);

  return <Editor editorState={editorState} onChange={setEditorState} />;
};