Question

当用户从一页返回到另一页时，我想刷新数据。这是我的useEffect函数现在的样子：

useEffect(() => {
    setIsLoading(true);

    AsyncStorage.getItem("user").then((response) => {
        const currentData = JSON.parse(response);
        setUser(currentData)
        fetch('URL',
            {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    user_id: currentData.id
                }),
            }
        )
            .then(response => response.json())
            .then(data => {
                 setNotis(data.notifications);
                 setIsLoading(false)
            })
            .catch(error => {
            });
    });
}, []);

该功能应在用户在页面上时每次运行。不管它是否为onBackPressed。

谢谢

Answer 1

使用React导航

如果您使用的是反应导航

，我们可以直接刷新屏幕

导入@ react-navigation / native

import React, { useEffect } from "react";
import { useIsFocused } from "@react-navigation/native";

const HomeScreen = (props) => {
const isVisible = useIsFocused();

useEffect(() => {
    console.log("called when screen open and also on close"); 
    // this will call on both screen open and screen close.

   if (isVisible) {
      console.log("called when screen open or when back on screen "); 
   }

}, [isVisible]);

return (
    ......
)

}

我希望这会有所帮助。

Answer 2

这里的真正问题是，在屏幕外导航时并未卸载屏幕，因此该钩子不会被触发，因为已经安装了该组件。有多个选项可以解决此问题，就像在屏幕聚焦/模糊时添加侦听器，或者只是监视navigation道具的更改一样。对于最后一种解决方法，您可以尝试执行以下操作：

useEffect(() => {
    setIsLoading(true);

    AsyncStorage.getItem("user").then((response) => {
        const currentData = JSON.parse(response);
        setUser(currentData)
        fetch('URL',
            {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    user_id: currentData.id
                }),
            }
        )
            .then(response => response.json())
            .then(data => {
                 setNotis(data.notifications);
                 setIsLoading(false)
            })
            .catch(error => {
            });
    });
}, [navigation]);

要观看onFocus事件，您可以从NavigationEvents导入react-navigation并将钩子的逻辑移到函数refreshData内

import {NavigationEvents} from 'react-navigation`
...

<NavigationEvents onWillFocus={refreshData}/>

此外，每当Promise结算后，您就应该将isLoading状态设置为false，例如可以使用

.finally(() => {
  setIsLoading(false)
})

当用户单击“后退”按钮时，对本机刷新内容进行反应-使用挂钩

2 个答案: