reactjs - 如何在反应中更新父组件

Question

所以每当我滚动到底部时，我都会尝试更新我的父组件。当我滚动到底部时，我调用了 fetchData，它位于父组件中并且是 useEffect 中的一个依赖项，但是，该组件不会更新，给我留下了来自第​​一个组件渲染的数据。

前7组数据获取成功，当我滚动到底部时，再次调用fetchData，但是组件没有更新，但是当我在父组件上单击保存时，则成功加载了下一组数据并按应有的方式显示到屏幕上。我觉得我做错了什么我只是对它是什么一无所知。任何帮助将不胜感激

这是父组件：

function Following({route, navigation}) {
  const [followingData, setfollowingData] = useState();
  const [loading, setLoading] = useState(true);
  const [lastVisible, setLastVisible] = useState(0);

  const fetchData = useCallback(() => {
    const dataRef = firestore().collection('usernames');

    dataRef
      .doc(route.params.username.toLowerCase())
      .collection('Following')
      .orderBy('followedAt')
      .startAfter(lastVisible)
      .limit(7)
      .onSnapshot((snapshot) => {
        const last = snapshot.docs[snapshot.docs.length - 1];
        setLastVisible(last.data().followedAt);
        let promises = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          promises.push(
            data.path.get().then((res) => {
              const userData = res.data();
              return {
                profileName: doc.id ? doc.id : null,
                displayName: userData.displayName ? userData.displayName : null,
                followerCount:
                  userData.followers !== undefined ? userData.followers : 0,
                followingCount:
                  userData.following !== undefined ? userData.following : 0,
                imageUrl: userData.imageUrl ? userData.imageUrl : null,
              };
            }),
          );
        });
        Promise.all(promises).then((res) => {
          setfollowingData(res);
        });
        setLoading(false);
      });
  }, []);

  useEffect(() => {
    const dataRef = firestore().collection('usernames');

    const cleanup = dataRef
      .doc(route.params.username.toLowerCase())
      .collection('Following')
      .onSnapshot(fetchData);

    return cleanup;
  }, [route.params.username, fetchData]);

  return (
    <>
      {loading ? (
        <ActivityIndicator size="large" color="black" />
      ) : (
        <>
          <FolloweringScreens
            data={followingData}
            screen={'Following'}
            username={route.params.username}
            navigation={navigation}
            fetchData={fetchData}
          />
        </>
      )}
    </>
  );
}

export default Following;

子组件是：

function FolloweringScreens({
  data,
  screen,
  username,
  navigation,
  fetchData
}) {

  return (
    <>
      <FlatList
        scrollEnabled={true}
        onEndReachedThreshold={0}
        onEndReached={fetchData}
        data={data}
        keyExtractor={(i, index) => index.toString()}
        renderItem={({item, index}) => {
          return (
            <>
                (`All my data being used here`)
           </>
      );
    }}
  />
</>

); }

导出默认的 FolloweringScreens；

标签： reactjsreact-nativerenderuse-effect