0

我有一个 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",
    }
]

反应草案所见即所得

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}
    />
    ...
)

我在编辑器上打印未定义。

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

console.log(apiResponse.description)

我在这里犯了什么错误？

谢谢你。

4

1 回答 1

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

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

于 2021-11-20T12:32:44.830 回答