Reactjs 如何在第二次提取时追加数据

当我第二次调用fetch方法时，我在追加数据方面遇到了问题。在初始渲染时，我的组件从数据库中获取数据，并将其存储在我的数据状态中。然后，当我滚动到底部时，我再次调用我的fetchData函数，但是我的新数据不是被附加到以下数据状态，而是被替换，现在只有新数据显示在我的屏幕上

代码如下：

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

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

    dataRef
      .doc(route.params.username.toLowerCase())
      .collection('Following')
      .onSnapshot(() => {
        dataaRef
          .doc(route.params.username.toLowerCase())
          .collection('Following')
          .orderBy('followedAt')
          .startAfter(lastVisible || 0)
          .limit(7)
          .get()
          .then((snapshot) => {
            snapshot.empty
              ? null
              : setLastVisible(
                  snapshot.docs[snapshot.docs.length - 1].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 = fetchData();

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

  return (
    <>
      <View
        style={styles}>
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Icon name="menu" color="#222" size={30} />
        </TouchableOpacity>
        <Text style={{left: width * 0.05}}>Following</Text>
      </View>

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

export default Following;

函数跟随（{route，navigation}）{
const[followData，setfollowData]=useState（[]）；
const[loading，setLoading]=useState（true）；
const[lastVisible，setLastVisible]=useState（）；
常量fetchData=（）=>{
const dataaRef=firestore（）.collection（'usernames'）；
const dataRef=firestore（）.collection（'usernames'）；
数据参考
.doc（route.params.username.toLowerCase（））
.collection（'Following'）
.onSnapshot（（）=>{
达塔雷夫
.doc（route.params.username.toLowerCase（））
.collection（'Following'）
.orderBy（'followedAt'）
.startAfter（最后可见| | 0）
.限额（7）
.get（）
。然后（（快照）=>{
snapshot.empty
无效的
：setLastVisible(
snapshot.docs[snapshot.docs.length-1].data（）.followedAt，
);
让承诺=[]；
snapshot.forEach（（doc）=>{
const data=doc.data（）；
承诺，推动(
data.path.get（）.then（（res）=>{
const userData=res.data（）；
返回{
profileName:doc.id？doc.id:null，
displayName:userData.displayName
？userData.displayName
：null，
以下计数：
userData.followers！==未定义？userData.followers:0，
以下数字：
userData.following！==未定义？userData.following:0，
imageUrl:userData.imageUrl？userData.imageUrl:null，
};
}),
);
});
承诺。所有（承诺）。然后（（res）=>{
设置以下数据（res）；
});
设置加载（假）；
});
});
};
useffect（（）=>{
const dataRef=firestore（）.collection（'usernames'）；
const cleanup=fetchData（）；
回流清理；
}，[route.params.username]）；
返回(
navigation.openDrawer（）}>
下列的
{加载(
) : (
)}
);
}
导出默认跟踪；

子组件如下所示，滚动到末尾时调用fetchData：

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

  return (
    <>
      <FlatList
        scrollEnabled={true}
        onEndReachedThreshold={0}
        onEndReached={fetchData} <<-- CALLING FETCHDATA AGAIN TO GET MORE DATA
        data={data}
        keyExtractor={(i, index) => index.toString()}
        renderItem={({item, index}) => {
          return (
                  (I use my data here)
          );
        }}
      />
    </>
  );
}

export default FolloweringScreens;

功能跟踪屏幕({
数据，
屏幕，
用户名，
航行
获取数据，
setNext，
}) {
返回(
);
}
导出默认跟踪屏幕；

如果您只想附加新数据，那么最好在设置状态中使用：

在这里，您从旧状态获取所有值，将其放入新对象中，并向其中添加新数据。如果您的状态是数组，则必须将{}与[]交换：

Promise.all(promises).then(res => {
  setfollowingData(oldState => ([...oldState, ...res]));
});

---

更新：添加示例

这返回如下数据：{“0”：{First set of data}，“1”：{second set of data}，“2”：{second set of data}，“3”：{second set of data}，“4”：{second set of data}}但是我需要数组中的数据，这样我就可以在FlatlList中使用它。这就是为什么你应该用花括号替换数组中的大括号。我将更新我的答案。你确定这是一个对象数组吗？错误消息听起来像是其他东西。您可以将响应记录到控制台中并将其添加到您的问题中吗？可以，但您总是会收到一个返回的数组，因此在这种情况下，错误消息没有意义。为了解决函数启动太快的问题，可以构建一个去盎司函数：我真是个白痴。所以我收到这个错误的原因是因为初始状态是空的。将初始状态更改为[]后，它现在可以工作。很抱歉浪费您的时间，非常感谢您的帮助，非常感谢，谢谢您，先生！！！

Promise.all(promises).then(res => {
  setfollowingData(oldState => ([...oldState, ...res]));
});