React Draft Wysiwyg 始终处于未定义状态

Question

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

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

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

apiResponse 有一个 Object 数组

[
    {
        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
            )
        )
     )
    ....
},[]);

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