React Draft Wysiwyg 始终保持未定义状态

Question

我有一个 useEffect 挂钩，它将执行 axios get api 请求并存储在 useState

中

const [apiResponse, setApiResponse] = useState([]);

useEffect(() => {
    ... // inside of .then()
    setApiResponse(data.data.payload);
    ....
},[]);

api响应有一个对象数组

[
    {
        userName: "user Name",
        description: "<p>lorem ipsum lorem ipsum lorem ipsum</p>",
        selected: "Yes",
    }
]

React 草稿所见即所得

const blocksFromHTML = convertFromHTML(`${apiResponse.description}`);
const state = ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap
);

const [editorState, setEditorState] = useState(() =>
    EditorState.createWithContent(state)
);

const onEditorStateChange = (editorState) => {
    setEditorState(editorState);
    return draftToHtml(convertToRaw(editorState.getCurrentContent()));
};
....
return (
    ....
    <Editor
        toolbarClassName="toolbarClassName"
        wrapperClassName="ChannelDesscription"
        editorClassName="editorClassName"
        editorState={editorState}
        defaultEditorState={editorState}
        onEditorStateChange={onEditorStateChange}
    />
    ...
)

我正在编辑器上打印 undefined。

在控制台日志中，我在第一次渲染时未定义，然后该值打印在控制台上..但在编辑器中它仍然是未定义的。

console.log(apiResponse.description)

我在这里犯了什么错误？

谢谢。

Answer 1

我无法根据代码验证这是问题所在，但我猜测问题在于初始状态如何与 useState

一起使用

签名

const [state, setState] = useState(initialState)

这里 initialState 仅用于初始化状态——在后续渲染中对 initialState 的更改不会影响 state 的值。

第一次渲染

const [state, setState] = useState(0)
console.log(state) // 0

第二次渲染

const [state, setState] = useState(1)
console.log(state) // 0

要在第一次渲染后更改状态，您必须调用 setState。

第三次渲染

const [state, setState] = useState(1)
console.log(state) // 0
setState(3)

第四次渲染

const [state, setState] = useState(1)
console.log(state) // 3

我的想法是，在你的情况下 editorState 在数据请求完成之前被初始化——这意味着它被初始化为一个未定义的值。如果您无法在初始化编辑器状态之前等待响应解析，则必须使用其他一些机制 initialValue 来提供对状态的响应值。

您可以通过在存储响应的 useEffect 中设置编辑器状态来测试这是否是问题所在。

useEffect(() => {
    ... // inside of .then()
    setApiResponse(data.data.payload);
    
    const { contentBlocks, entityMap } = convertFromHTML(apiResponse.description);
    setEditorState(
        EditorState.createWithContent(
            ContentState.createFromBlockArray(
                contentBlocks,
                entityMap
            )
        )
     )
    ....
},[]);

在您的最终实施中，请确保您不会在用户已经做出更改后意外覆盖编辑器状态。

React Draft Wysiwyg 始终保持未定义状态

React Draft Wysiwyg always stays on undefined

javascript

reactjs

draftjs

react-draft-wysiwyg