问题描述：
我使用的是开源的编辑器vditor，渲染采用异步模式

<div id="vditor" ref={(ref) => {
                                console.log("这是激活的文件:", activeFile)
                                const vditor = new Vditor('vditor', {
                                    toolbarConfig: {
                                        pin: true,
                                    },
                                    cache: {
                                        enable: false,
                                    },
                                    minHeight: 600,
                                    after() {
                                        vditor.setValue(activeFile ? activeFile.body : '')
                                    },
                                    input(value, previewElement) {
                                        fileChange(activeFile.id, value)
                                    }
                                })

当我点击左侧文件时候，由于异步读取文件内容还来不及读取完，页面进行渲染将节点渲染出来导致body不存在。
通过async/await来解决

const fileClick = async (fileID) => {
        //

        const currentFile = files[fileID]

        if (!currentFile.isLoaded) {
            await fileHelp.readFile(currentFile.path).then(value => {
                const newFile = {...files[fileID], body: value, isLoaded: true}
                setFiles({...files, [fileID]: newFile})
            })
        }

        if (!openFileIDs.includes(fileID)) {
            setOpenFileIDs([...openFileIDs, fileID])
        }
        setActiveFileID(fileID)
    }