React Native组件/页面刷新方案咨询：嵌套导航等场景遇难题

Hey there! I’ve run into similar refresh headaches with the exact tech stack you’re using, so let’s walk through why your current approaches aren’t working and how to fix them.

First, let’s diagnose your existing methods #

• Passing callbacks via navigation params: This falls apart with nested navigation because callbacks can get lost when components unmount, or the navigation hierarchy makes it hard to trigger them reliably. Plus, SectionLists need a stable, updated data source to re-render—callbacks alone might not trigger the state update correctly.
• Directly assigning AsyncStorage.getItem results: AsyncStorage is asynchronous, so you’re probably assigning a Promise to your state instead of the actual data. Even if you waited for the Promise to resolve, just assigning it without using setState (or the useState updater function) won’t trigger a component re-render.

Targeted Solutions for Your Scenarios #

1. Refresh on Navigation (e.g., returning to a list page from a detail screen) #

For nested navigation, forget callbacks—use useFocusEffect from React Navigation. This hook runs every time your screen comes into focus, which is perfect for re-fetching data when the user navigates back.

Here’s a quick example for your SectionList screen:

import { useFocusEffect } from '@react-navigation/native';
import { SectionList, View, Text } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useCallback } from 'react';

export default function MySectionListScreen() {
  const [sectionData, setSectionData] = useState([]);

  // Wrap data fetch in useCallback to avoid unnecessary re-renders
  const fetchData = useCallback(async () => {
    const storedData = await AsyncStorage.getItem('mySectionData');
    if (storedData) {
      setSectionData(JSON.parse(storedData));
    }
  }, []);

  // Trigger fetch every time the screen is focused
  useFocusEffect(
    useCallback(() => {
      fetchData();
    }, [fetchData])
  );

  return (
    <SectionList
      sections={sectionData}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
      // Critical: Tell SectionList to re-render when sectionData changes
      extraData={sectionData}
    />
  );
}

2. Refresh After ActionSheet Interactions #

When you use an ActionSheet to update data (e.g., deleting an item), you need to:

1. Update the data in AsyncStorage
2. Trigger a state update to refresh the SectionList

Example with an ActionSheet:

import { ActionSheetIOS } from 'react-native';

// Inside your component
const handleActionSheetPress = () => {
  ActionSheetIOS.showActionSheetWithOptions(
    {
      options: ['Delete Item', 'Cancel'],
      destructiveButtonIndex: 0,
      cancelButtonIndex: 1,
    },
    async (buttonIndex) => {
      if (buttonIndex === 0) {
        // 1. Update AsyncStorage
        const updatedData = sectionData.map(section => ({
          ...section,
          data: section.data.filter(item => item.id !== selectedItemId)
        }));
        await AsyncStorage.setItem('mySectionData', JSON.stringify(updatedData));
        
        // 2. Update state to trigger SectionList refresh
        setSectionData(updatedData);
      }
    }
  );
};

3. Key Tip for SectionList Refresh #

Don’t forget the extraData prop! SectionList optimizes renders by default, so if your state changes but sections doesn’t look different (or you’re relying on external state), you need to pass extraData to tell React to re-render the list.

Final Notes #

• Avoid passing callbacks through navigation stacks—it’s fragile in nested setups. Stick to useFocusEffect for screen-level refresh.
• Always handle AsyncStorage with async/await or .then()—never assign the raw Promise to state.
• For cross-component state that needs to refresh multiple screens, consider using React Context or a lightweight state manager (like Zustand) instead of relying on AsyncStorage alone.

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