我是React Native 的新手，目前我正在使用expo 开发应用程序。我正在使用 react navigation 6 中的 TopTabNavigator 并且我不明白如何减少请求的数量。基本上，每当我点击某个选项卡时，都会发出请求。 （因为重新创建了组件——即使我回到上一个相同的选项卡，也没有修改数据）。我尝试使用 react navigation 中的 useFocusEffect ，但它没有按预期工作。也许我应该在 ProfileTabsScreen 中提出请求并通过 props 将数据传递到特定的选项卡？

主要部件

const ProfileStatsScreen = (props) => {
  const { userId } = props.route.params;
  const { initialRoute, username } = props.route.params;

  const RatingsDetails = () => <RatingsTab userId={userId} />;
  const FollowersDetails = () => <FollowersTab userId={userId} />;
  const FollowingsDetails = () => <FollowingsTab userId={userId} />;

  return (
    <SafeAreaView style={styles.screen}>
      <Header title={username} />
      <TopTabContainer initialRouteName={initialRoute}>
        <Tab.Screen
          name="Ratings"
          component={RatingsDetails}
          options={{ tabBarLabel: "Reviews" }}
        />
        <Tab.Screen
          name="Followers"
          component={FollowersDetails}
          options={{ tabBarLabel: "Followers" }}
        />
        <Tab.Screen
          name="Following"
          component={FollowingsDetails}
          options={{ tabBarLabel: "Followings" }}
        />
      </TopTabContainer>
    </SafeAreaView>
  );
};

选项卡组件（评级）

export const RatingsTab = ({ userId }) => {
  const { user } = useAuth();
  const [reviews, setReviews] = useState([]);
  const [loading, setLoading] = useState(false);

  useFocusEffect(
    React.useCallback(() => {
      setLoading(true);
      axios
        .get(`${process.env.BASE_ENDPOINT}/users/${userId}/reviews`, {
          headers: { Authorization: `Bearer ${user?.token}` },
        })
        .then((res) => {
          setReviews(res.data.reviews);
          setLoading(false);
        })
        .catch((err) => {
          console.log(err);
          setLoading(false);
        });
      setLoading(false);
    }, [userId, user?.token])
  );

  const renderRatings = ({ item }) => {
    const { reviewer, rating, review, createdAt } = item;

    return (
      <CardRatings
        avatar={reviewer?.avatar}
        name={reviewer?.name}
        date={moment(createdAt).format("LL")}
        rating={rating}
        review={review}
        service={"Tuns"}
      />
    );
  };

  return (
    <>
      {!loading && (
        <FlatList
          data={reviews}
          keyExtractor={(item) => item?._id}
          renderItem={renderRatings}
        />
      )}
      {loading && <Spinner />}
    </>
  );
};