Flatlist 无限下拉记载数据问题

来源:7-7 FlatList的高级应用&上拉加载更多功能实现-2【这个技能很实用】

慕尼黑0536602

2022-09-05

hi老师,
请教下以下的问题 :
1.就是setState如果用js的扩展函数,react native会不会重新渲染?例如:(也就是前面的showList,在再次触动获取数据的情况下,会不会再load多一次?我这里后端接口,写成pagination ,每次只放10条数据。)

  setShowList([...showList, ...result!.data.totalData]);

2.如果一个列表里,可能出现多次同一个用户,keyExtractor是不是就不能使用用户的id ? ,因为我尝试了之后说会出现same key … 这个需要如何解决呢?我有尝试添加Match.random() 这个偷鸡摸狗的方法,但是万一不好彩撞上两个一模一样的数字,可能就不好使了。。。(您有好的建议吗?):

 <FlatList
        data={showList}
        keyExtractor={item => item._id.toString()+Math.random()}
        initialNumToRender={6}
        ListFooterComponent={renderLoader}
        onEndReached={loadMoreItem}
        onEndReachedThreshold={0}
        renderItem={({item, index}) => (
          <GiveReceiveItem
            type={'giver'} //giver or receiver
            onPressRedeem={() => onPressRedeem(item._id)}
            orderId={item._id}
            onPress={() => {
              navigation.navigate(routes.User_DETAILS, {
                user: item.receiver.receiveUser,
              });
            }}
           
          />
        )}
        ListHeaderComponent={() => (
写回答

1回答

CrazyCodeBoy

2022-09-06

问题一还没试过可以尝试下看看;
问题二,如果列表中会有重复key的话建议在收到数据时做下包装添加个额外字段,如果发现新收到的数据和已存在的数据key重复,对这个key加下后缀。
0
1
慕尼黑0536602
非常感谢!
2022-09-06
共1条回复

RN入门到进阶,打造高质量上线App

解锁React Native开发应用新姿势,React Native新版本热门技术

3144 学习 · 3241 问题

查看课程