React Native FlatList结合Redux时onRefresh触发无限循环问题排查

我仔细看了你的代码，核心问题出在下拉刷新后没有重置refreshing状态，导致FlatList一直认为刷新还在进行，不断触发onRefresh回调，最终形成无限循环。下面是具体分析和修复方案：

问题根源 #

你的handleRefresh方法里将refreshing设为true，但在Redux异步请求完成（不管成功还是失败）后，没有把这个状态改回false。根据FlatList的规则：只要refreshing为true，就会持续调用onRefresh，这就是无限循环的直接原因。

另外，还需要确保Redux reducer能正确处理数据的重置和追加逻辑，避免刷新时数据状态混乱。

修复方案 #

1. 监听Redux状态变化，自动重置refreshing #

在Search组件中添加componentDidUpdate生命周期方法，当Redux的请求状态（status）发生变化时，结束刷新状态：

componentDidUpdate(prevProps) {
  // 当请求从加载状态切换为成功/失败时，重置refreshing
  if (this.state.refreshing && prevProps.status !== this.props.status) {
    this.setState({ refreshing: false });
  }
}

2. 优化Reducer的数据处理逻辑 #

确保reducer在FETCH_DATA_OPTIONS_RESET时清空数据，在FETCH_DATA_OPTIONS_SUCCESS时根据page判断是替换（下拉刷新）还是追加（加载更多）数据：

// 示例reducer代码
const initialState = {
  fetch_data_options: [],
  error: false,
  status: null,
};

const filterReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCHING_DATA_OPTIONS:
      return { ...state, status: 'loading' };
    case FETCH_DATA_OPTIONS_SUCCESS:
      // page=1时替换数据（下拉刷新），否则追加数据（加载更多）
      const newData = action.meta?.page === 1 
        ? action.data 
        : [...state.fetch_data_options, ...action.data];
      return {
        ...state,
        fetch_data_options: newData,
        error: false,
        status: 'success',
      };
    case FETCH_DATA_OPTIONS_FAILURE:
      return { ...state, error: true, status: 'failure' };
    case FETCH_DATA_OPTIONS_RESET:
      return { ...initialState };
    default:
      return state;
  }
};

注意：需要同步修改你的action，在getDataOptionsSuccess中传递page参数，让reducer能区分刷新和加载更多：

function getDataOptionsSuccess(data, page) {
  return {
    type: FETCH_DATA_OPTIONS_SUCCESS,
    data: data.DATA,
    status: data.STATUS,
    meta: { page } // 新增page参数
  };
}

然后在fetchDataOptions调用时传入page：

dispatch(getDataOptionsSuccess(json[0], page))

3. 调整handleRefresh的执行顺序 #

确保状态更新和Redux操作的顺序合理，避免数据逻辑冲突：

handleRefresh = () => {
  this.setState(
    {
      page: 1,
      refreshing: true,
    },
    () => {
      this.props.onResetDataOptions(); // 先重置数据
      this.props.onFetchDataOptions(this.state.page, this.props.GroupBy); // 再请求新数据
    }
  );
};

额外建议 #

• 可以在Redux状态中新增isLoading字段，直接用这个字段控制FlatList的refreshing和loading状态，不用在组件内维护状态，更符合Redux单一数据源的设计原则。
• 将FlatList的onEndReachedThreshold设置为0.1或0.2，比0更合理，避免过早触发加载更多逻辑。

按照以上方案修改后，下拉刷新完成后refreshing会被正确重置，无限循环的问题就能解决了。

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