选择适合与Firestore的onsnapshot一起使用的React Hook-PHP中文网问答

我在我的React Native应用程序中使用了很多Firestore快照。我还使用了React hooks。代码看起来像这样：

useEffect(() => {
    someFirestoreAPICall().onSnapshot(snapshot => {

        // 当组件初始化加载时，将所有加载的数据添加到状态中。
        // 当Firestore上的数据发生变化时，我们在此回调中接收到更新，
        // 然后根据当前状态更新UI

    });;
}, []);

起初，我认为useState是存储和更新UI的最佳hook。然而，根据我的useEffect hook的设置，它带有一个空的依赖数组，当快照回调被触发并且我尝试使用新更改修改当前状态时，当前状态是未定义的。我认为这是由于闭包引起的。我能够通过使用useRef和forceUpdate()来解决这个问题，代码如下：

const dataRef = useRef(initialData);

const [, updateState] = React.useState();
const forceUpdate = useCallback(() => updateState({}), []);

useEffect(() => {
    someFirestoreAPICall().onSnapshot(snapshot => {

       // 如果快照数据被添加
       dataRef.current.push(newData)
       forceUpdate()

       // 如果快照数据被更新
       dataRef.current.find(e => some condition) = updatedData
       forceUpdate()

    });;
}, []);

return(
// 使用dataRef.current的JSX
)

我的问题是，我是否正确地使用了useRef以及与useState不同的forceUpdate？我觉得在整个应用程序中更新useRef hook并调用forceUpdate()并不正确。当尝试使用useState时，我尝试将状态变量添加到依赖数组中，但结果导致无限循环。我只想要初始化快照函数一次，并且希望组件中的有状态数据随着后端的变化而随时间更新（在onSnapshot回调中触发）。

const [data, setData] = useState([]); useEffect(() => { const unsubscribe = someFirestoreAPICall().onSnapshot(snap => { const data = snap.docs.map(doc => doc.data()) this.setData(data) }); //记得在卸载组件时取消实时监听器，否则会造成内存泄漏 return () => unsubscribe() }, []);

useEffect(() => { const colRef = collection(db, "data") //real time update onSnapshot(colRef, (snapshot) => { snapshot.docs.forEach((doc) => { setTestData((prev) => [...prev, doc.data()]) // console.log("onsnapshot", doc.data()); }) }) }, [])

useEffect(() => { const colRef = collection(db, "data") //实时更新 onSnapshot(colRef, (snapshot) => { snapshot.docs.forEach((doc) => { setTestData((prev) => [...prev, doc.data()]) // console.log("onsnapshot", doc.data()); }) }) }, [])