在反应本机提取后填充 WYSIWYG 编辑器

Question

我正在尝试将此 WYSIWYG package 合并到我的 React Native 项目 (0.64.3) 中。我通过 Expo (~44.0.0) 使用托管工作流构建了我的项目。

我注意到的问题是，编辑器有时会使用我数据库中的文本进行渲染，有时则不使用它进行渲染。

这是从 firebase 检索信息的函数片段。

const [note, setNote] = useState("");
const getNote = () => {
    const myDoc = doc(db,"/users/" + user.uid + "/Destinations/Trip-" + trip.tripID + '/itinerary/' + date);
    getDoc(myDoc)
    .then(data => { 
        setNote(data.data()[date]);
    }).catch();
  }

以上代码和编辑器组件嵌套在一个大函数中

export default function ItineraryScreen({route}) {

// functions 

return (
    <RichEditor
        onChange={newText => {
            setNote(newText)
        }}
        scrollEnabled={false}
        ref={text}
        initialFocus={false}
        placeholder={'What are you planning to do this day?'}
        initialContentHTML={note}
    />
)
}

呈现的文本（模拟器的屏幕截图）应该是这样的：

但这是我大部分时间得到的（物理设备的屏幕截图）：

我的假设是，文本编辑器的数据实际可用与呈现编辑器的时间之间存在非常轻微的延迟。我相信我的模拟器可以正确呈现，因为它能够更快地处理 getNote() 函数。

我尝试过对父 View 的 display 使用 setTimeOut 函数，但它没有解决问题。

你有什么建议？

Answer 1

我相信我已经解决了这个问题。我需要在为 note 赋值之前更好地解析响应，并且仅在建立值后才显示编辑器和工具栏。

在查询 firebase 之前，我将 null 值分配给 note

const [note, setNote] = useState(null);

下面不管结果如何我都会给note赋值

if(data.data() !== undefined){
    setNote(data.data()[date]);
} else {
    setNote("");
}

最后一步是只显示编辑器一次note不再有空值。

{
   note !== null &&
      <RichToolbar
         style={{backgroundColor:"white", width:"114%", flex:1, position:"absolute", left:0, zIndex:4, bottom: (toolbarVisible) ? keyboardHeight * 1.11 : 0 , marginBottom:-40, display: toolbarVisible ? "flex" : "none"}}
         editor={text}
         actions={[ actions.undo, actions.setBold, actions.setItalic, actions.setUnderline,actions.insertLink, actions.insertBulletsList, actions.insertOrderedList, actions.keyboard ]}
         iconMap={{ [actions.heading1]: ({tintColor}) => (<Text style={[{color: tintColor}]}>H1</Text>), }}
                  />
          
      <RichEditor
         disabled={disableEditor}
         initialFocus={false}
         onChange={ descriptionText => { setNote(descriptionText) }}
         scrollEnabled={true}
         ref={text}
         placeholder={'What are you planning to do?'}
         initialContentHTML={note}
      />
}

它工作正常。

在反应本机提取后填充 WYSIWYG 编辑器

Populte WYSIWYG editor after react native fetch

react-native