Question

在我的应用中，我有一个home屏幕和getData屏幕，当用户单击主屏幕上的按钮时，该用户将被定向到getData屏幕，并且在检索数据时从API中，将引导用户到home屏幕，并查看检索到的数据。每当用户尝试从API获取不同的数据时，都会发生这种情况。

当前在我的getDataScreen.js

中

useEffect(() => {
    ...//data fetched, then direct to home page
    props.navigation.navigate('Home', {
        myData: myData
    }
})

在我的homeScreen.js中，有一个modal可以显示数据，但是modal可以继续显示。

useEffect(() => {
    if (props.navigation.getParam('myData')) {
        setData(myData);
        setModalShow(true);
    }
})

return (
    <View>
    <Button onPress={()=>{props.navigation.navigate('getData',{
        params:'params' // params to call API
    })}}/>
    <MyModal isVisible={modalShow}>.....</MyModal>
)

如何在检测到modal时使myData仅显示一次？

Answer 1

从您提供的代码来看，每次状态更新后，似乎都会调用 useEffect 。因为只想显示特定状态更新（例如 data ）的模态，所以必须像

一样自定义 useEffect 钩子

useEffect(() => {
  if (props.navigation.getParam('myData')) {
        setData(myData);
        setModalShow(true);
    }
}, [data]); // Only re-run the effect if data changes

您可以从here获取参考。

在导航参数上反应本机使用useEffect

1 个答案: