首页 > 解决方案 > 有没有办法在每次点击时在反应博览会中刷新 HomeStacks 屏幕的内容?

问题描述

我正在开发一个带有反应博览会的移动应用程序。我有一个获取项目列表的菜单。不幸的是,它只在第一次点击时获取数据。当我从一个菜单导航到另一个菜单时,它不会刷新数据。

  useEffect(() => {
    getItemsListGET();
  },[]);

  const getItemsListGET = async () => {
    try {
      await refreshTokens(tokens.refreshToken).then((response) => {
        dispatch(
          pushAlltoken({
            token: response.data.token,
            refreshToken: response.data.refreshToken,
          })
        );

        try {
          setloading(true);
          axios
            .get(`${myURL}`, {
              headers: {
                Authorization: `Bearer ${response.data.token}`,
              },
            })
            .then((result) => {
              setMyliste([...new Set([...myliste ,...result.data.list])])
              setloading(false);


            }).then(
              
            );
        } catch (error) {
          console.log("there was a problem in getitems function", error);
          setloading(false);
        }
      });
    } catch (error) {
      console.log("Error from all function ", error);
      setloading(false);
    }
  };

导航的代码如下

    export default function HomeStack() {
  return (
    <HomeStacks.Navigator headerMode={"none"}>
      <HomeStacks.Screen
        name="HomeScreen"
        component={Home}
        options={{ headerTitle: "Home" }}
      />

      <HomeStacks.Screen
        name="Product"
        component={Product}
        options={{ headerTitle: "Product" }}
      />

    </HomeStacks.Navigator>
  );
}

标签: reactjsmobilerefreshuse-effect

解决方案


useEffect您应该在的依赖项数组中添加屏幕名称变量(或类似的东西) 。

当变量的值发生变化时,会重新运行效果,并再次加载数据。

不能更具体,因为没有足够的代码。


推荐阅读