Javascript 草稿JS编辑器不更新它'；父组件更改其值时的内容？

我有一个简单的用例：有一个DraftEditor组件，它将

值

作为其道具，并基于

值

（空或有内容）创建编辑器状态。父级可能会更改

值

，当它更改时，我希望草稿编辑器也会更新它的内容。这是我的

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} />;
};

import React，{useState}来自“React”；
从“草稿js”导入{Editor，EditorState，convertFromRaw}；
导出默认值（{value}）=>{
常量initialState=值
？EditorState.createWithContent（convertFromRaw（JSON.parse（value）））
：EditorState.createEmpty（）；
常量[editorState，setEditorState]=使用状态（initialState）；
返回；
};

问题：当父组件更新

值

时，

编辑器

的内容没有得到更新。相反，它只显示初始化时使用的内容。我找到的解决方法是在

值更改时手动调用
setEditorState
，但我觉得这一步是不必要的，因为当组件重新呈现时，我希望编辑器也重新计算其内部状态？也许我错过了什么

知道为什么
编辑器不更新其内部状态吗

这里有一个代码沙盒：
基本问题是

const[editorState，setEditorState]=useState（initialState）；

仅使用它的参数
initialState
一次（在初始运行时），无论
initialState
更改多少次

当使用
useState（）
时，如果存在一个prop（或其他）依赖项，请将其与
useffect（）
配对，使其具有反应性

这看起来有点倒退，但是很多（大多数）钩子都是关于在函数组件重新运行时保持不变。因此
useState（）
仅在初始调用后通过
setEditorState
更新
editorState

import React，{useState，useffect}来自“React”；
从“草稿js”导入{Editor，EditorState，convertFromRaw}；
导出默认值（{value}）=>{
常量[editorState，setEditorState]=useState（）；
useffect（（）=>{
常量状态=值
？EditorState.createWithContent（convertFromRaw（JSON.parse（value）））
：EditorState.createEmpty（）；
setEditorState（州）；
}，[value]）；//将“value”添加到依赖项列表中，以便在值更改时重新计算状态。
返回；
};


在上面的代码中，editorState在初始组件调用时将为null。如果这是
编辑器
组件的问题，则可以在函数中外部化状态计算，并在
useState（）
和
useffect（）中调用它

import React，{useState，useffect}来自“React”；
从“草稿js”导入{Editor，EditorState，convertFromRaw}；
导出默认值（{value}）=>{
常量[editorState，setEditorState]=使用状态（calcState（值））；
useffect（（）=>{
setEditorState（calcState（值））；
}，[value]）；//将“value”添加到依赖项列表中，以便在值更改时重新计算状态。
返回；
};
常量calcState=（值）=>{
返回值
？EditorState.createWithContent（convertFromRaw（JSON.parse（value）））
：EditorState.createEmpty（）；
}


由于这两个钩子经常一起使用，我倾向于将它们配对到一个定制钩子中，以封装细节

不同之处在于，自定义钩子每次运行组件时都会运行，但是
editorState
仍然仅在值更改时更新

定制挂钩

import React，{useState，useffect}来自“React”；
从“草稿js”导入{EditorState，convertFromRaw}；
导出常量useConvertEditorState=（值）=>{
常量[editorState，setEditorState]=使用状态（calcState（值））；
useffect（（）=>{
setEditorState（calcState（值））；
}，[价值]；
返回[editorState，setEditorState]；
}
常量calcState=（值）=>{
返回值
？EditorState.createWithContent（convertFromRaw（JSON.parse（value）））
：EditorState.createEmpty（）；
}

组件

import React，{useState，useffect}来自“React”；
从“草稿js”导入{Editor}；
从“/useConvertEditorState”导入{useConvertEditorState}
导出默认值（{value}）=>{
常量[editorState，setEditorState]=useConvertEditorState（值）；
返回；
};
这很有道理。。我以前确实实现过这个，但想知道“useEffect”修复背后的原因。