React Native：如何刷新数据答案

【问题标题】：ReactNative: how to refresh on dataReact Native：如何刷新数据
【发布时间】：2021-05-04 10:47:55
【问题描述】：

我是 React Native 代码构建的新手。下面是我从 Firebase 获取数据的 React Native 代码。

const page_one = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [placeList, setPlaceList] = useState([])
   const [message, setMessage] = useState(false)

   const db = firebase.firestore().collection('places')

    const onLoad = async () => {

        const place_ref = await firebase.firestore().collection('places').get()
        if (place_ref.empty) {
            setMessage(true)
            return
        }

        const places = []
        try {
            place_ref.forEach(doc => {
                const entity = doc.data()
                entity.id = doc.id
                places.push(entity)
            })
            setPlaceList(places)
            setMessage(false)
            setIsLoading(false)
            return
        } catch (error) {
            console.log("Error:\n", error.message)
            return
        }
    }

}

    useEffect(() => {
        onLoad()
        console.log('place List')
    }, [isLoading])

return (<View></View>)

}

每次渲染时我都需要刷新当前组件，以从 firebase 获取新添加的数据。如何使这成为可能。截至目前，当我第二次渲染组件时，组件没有加载。它只获取旧数据，不加载最新数据，我仍然刷新整个应用程序。

每当我渲染组件时，我都需要获取最新数据。

我尝试了下面的 useEffect 钩子：

    useEffect(() => {
        onLoad()
        console.log('place List')
    }, [isLoading, placeList])

但它会调用 firebase 请求 n 次，直到我存在当前组件。

当我访问当前组件时，我只想调用一次 firebase 请求。

请帮帮我..

【问题讨论】：

访问第二个组件是什么意思？你是说导航？
@prasanth 我的意思是，每次渲染组件时都需要获取新数据。
根据您的说法，上面的代码在您的返回语句中没有任何渲染活动。它只是简单的视图。如果您需要基于渲染的刷新，请在 useffect 依赖项上添加渲染状态变量。比如,[loading,renderingStateValue]。每次更新renderingStateValue的值都会执行加载函数

标签： reactjs firebase react-native google-cloud-firestore

【解决方案1】：

据我了解，每当此组件获得焦点时，您都需要刷新

所以就这样写吧

useEffect(() => {
  const unsubscribe = navigation.addListener("focus", () => {
    onLoad() // Gets fired whenever this screen is in focus
  });

  return unsubscribe;
}, [navigation]);

另外别忘了解构 props 以获得 navigation props

这样

const page_one = ({ navigation }) => {
    ...Code Inside
}

【讨论】：