使用react-redux时，react-navigation切换页面FlatList数据重复问题

Hey there, let's tackle this issue step by step. The core problem here is that your Redux store is holding onto data from FlatList B when you navigate back to A, and Component A isn't properly resetting or refetching its own data. Let's go through some actionable fixes:

When you navigate back from B to A, you should clear the B-specific data in your Redux store (or reset the relevant slice to its initial state). You can do this with a cleanup function in Component B's useEffect:

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';

const ComponentB = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    // Cleanup runs when component unmounts (navigate back)
    return () => {
      dispatch(resetBData()); // Dispatch your reset action here
    };
  }, [dispatch]);

  // Rest of your component code
};

Make sure your reducer handles the resetBData action by returning the initial state for that slice.

Since you're using react-navigation, leverage the useFocusEffect hook to trigger a data fetch whenever Component A comes back into view. This guarantees A gets fresh data instead of relying on stale store state:

import { useFocusEffect } from '@react-navigation/native';
import { useDispatch, useSelector } from 'react-redux';
import React from 'react';

const ComponentA = () => {
  const dispatch = useDispatch();
  const aData = useSelector(state => state.aData); // Ensure this is A's correct slice

  useFocusEffect(
    React.useCallback(() => {
      // Fetch data specifically for Component A
      dispatch(fetchAData());
    }, [dispatch])
  );

  return <FlatList data={aData} {...yourFlatListProps} />;
};

This way, every time you navigate back to A, it will pull its own data again, overriding any leftover data from B.

It's easy to accidentally use the wrong Redux selector in Component A. Make sure you're selecting the slice dedicated to A's data, not B's:

// ❌ Wrong: Accidentally using B's data slice
const data = useSelector(state => state.bData);

// ✅ Correct: Using A's dedicated data slice
const data = useSelector(state => state.aData);

If you're working with class components instead of functional ones, ensure your shouldComponentUpdate method is correctly comparing the relevant data props. A common mistake is not checking the A-specific data slice properly:

shouldComponentUpdate(nextProps) {
  // Only re-render if A's data has changed
  return this.props.aData !== nextProps.aData;
}

Note: useFocusEffect is more reliable for navigation focus changes than relying solely on shouldComponentUpdate.

If you're using a single slice to store data for both components, that's almost certainly causing the overlap. Split them into separate slices (e.g., aDataSlice and bDataSlice) so their state stays isolated. This prevents one component's data from overwriting the other's.

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