无法对卸载的组件 useEffect 错误执行 React 状态更新

问题描述

我有这段代码，用于获取数据并将其传递给组件。这个子组件然后呈现我制作的数据，以便当用户从顶部下拉时，组件将刷新但每当我刷新 first time only 时，我都会收到错误

Warning: Can't perform a React state update on an unmounted component. This is a no-op,but it indicates a memory leak in your application. To fix,cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

代码如下：

function FolloweringScreens({
  data,screen,username,navigation,noMoreData,setLoadingMore,lastVisible,setNoMoreData,setLastVisible,setfollowingData,loadingMore,setLoading,currentuser,}) {
  const [stateData,setStateData] = useState();
  const [refresh,setRefresh] = useState(false);

  useEffect(() => {
    const setState = () => setStateData(data);
    return setState();
  },[data,refresh]);

  // Refresh
  const handleFetch = () => {
    setRefresh(true);
    const cleanup = fetchData(
      username,setRefresh,);
    return cleanup;
  };

  return (
    <>
      <FlatList
        refreshing={refresh}
        onRefresh={handleFetch}
        data={stateData}
        keyExtractor={(i,index) => index.toString()}
        renderItem={({item,index}) => {
          return (
            <>
                 { Using my data here }
            </>
          );
        }}
      />
    </>
  );
}

export default FolloweringScreens;

这里是 fetchData 函数：

export const fetchData = (
  username,) => {
  const dataaRef = firestore().collection('usernames');
  setNoMoreData && setNoMoreData(false);

  // If in

  dataaRef // Go to whichever users clicked on data
    .doc(username.toLowerCase())
    .collection(screen) // Go to followers/following
    .orderBy('followedAt')
    .limit(6)
    .get()
    .then((snapshot) => {
      setLoading(true);
      snapshot.empty
        ? null
        : setLastVisible(
            snapshot.docs[snapshot.docs.length - 1].data().followedAt,);
      let promises = [];
      // 1b. For each document,return that document data
      snapshot.forEach((doc) => {
        const data = doc.data();
        promises.push(
          data.path.get().then((res) => {
            const userData = res.data();

            // Go to logged in users directory to see
            // if they are following these users in this
            // users following/followers page so we can
            // differentiate whether to display follow/unfollow button
            return dataaRef
              .doc(
                currentuser === undefined
                  ? username.toLowerCase()
                  : currentuser.toLowerCase(),)
              .collection('Following')
              .doc(doc.id)
              .get()
              .then((searchedDocs) => {
                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,isFollowed: searchedDocs.exists ? true : false,};
              });
          }),);
      });
      // 1c. set All document data to followingData
      Promise.all(promises).then((res) => {
        setfollowingData(res);
        // console.log('res',res);
      });
      setLoading(false);
      setRefresh && setRefresh(false);
    });
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）