Redux实现无限滚动时重复渲染餐厅数据的问题求助

常见问题与修复方案 #

1. Reducer数据合并逻辑错误 #

这是最常见的诱因——每次加载新数据时，错误地将旧数据重复拼接，而非仅追加新分页数据。

错误示例：

case 'LOAD_RESTAURANTS_SUCCESS':
  return {
    ...state,
    restaurants: [...state.restaurants, ...state.restaurants, action.payload]
    // 重复混入旧数据，或错误拼接导致重复
  };

正确写法：
仅将新请求的分页数据追加到原有数组后：

case 'LOAD_RESTAURANTS_SUCCESS':
  return {
    ...state,
    restaurants: [...state.restaurants, ...action.payload],
    currentPage: state.currentPage + 1,
    isLoading: false
  };

2. 分页参数未正确递增 #

若每次加载都固定请求第一页数据，新数据必然和旧数据重复。需从Redux状态中获取当前页码，递增后再发起请求。

错误示例：

export const loadRestaurants = () => async dispatch => {
  dispatch({ type: 'LOAD_RESTAURANTS_START' });
  const data = await api.getRestaurants(1); // 固定传第一页
  dispatch({ type: 'LOAD_RESTAURANTS_SUCCESS', payload: data });
};

正确写法：

export const loadRestaurants = () => async (dispatch, getState) => {
  const { currentPage } = getState().restaurants;
  dispatch({ type: 'LOAD_RESTAURANTS_START' });
  const data = await api.getRestaurants(currentPage + 1);
  dispatch({ type: 'LOAD_RESTAURANTS_SUCCESS', payload: data });
};

3. 重复触发加载请求 #

若滚动监听未处理加载状态，会在数据加载完成前多次触发请求，最终导致重复添加数据。

修复方法：
仅当isLoading为false且还有更多数据时，才触发加载：

const handleScroll = (event) => {
  const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
  const isCloseToBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height - 200;
  
  if (isCloseToBottom && !isLoading && hasMore) {
    dispatch(loadRestaurants());
  }
};

同时在Reducer中维护isLoading状态：请求开始设为true，成功/失败后设为false。

4. 列表项key属性设置错误 #

若用数组索引作为key，数组变化时React会重新渲染所有项，视觉上看似重复数据。

正确做法：
使用餐厅数据中的唯一ID作为key：

<FlatList
  data={restaurants}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => <RestaurantItem item={item} />}
  onScroll={handleScroll}
  scrollEventThrottle={16}
/>

5. API返回重复数据 #

检查后端API是否存在分页参数失效问题，比如无论传什么页码都返回第一页数据。可以在Action中打印请求的页码和返回的数据集，确认是否重复。

调试建议 #

• 在Reducer的LOAD_RESTAURANTS_SUCCESS分支中打印新旧数据，验证合并逻辑
• 在Action中打印请求页码与返回数据，排查是否请求了重复页
• 在组件中打印restaurants数组的长度与内容，确认数据是否真的重复

内容的提问来源于stack exchange，提问作者selona