Expo50+RN0.73.4组件渲染旧状态问题求助

核心问题分析 #

你的代码存在三个关键问题，导致组件不更新、刷新状态异常：

• checklists.map循环未返回元素，组件无法渲染列表项
• RefreshControl的refreshing属性逻辑反转，且请求完成后未将isRefreshing重置为false
• 异步请求未做异常处理，可能导致状态卡死

修复后的完整代码 #

const ChecklistScreen = ({ navigation, route }) => {
    const [checklists, setChecklists] = useState([]);
    const [isRefreshing, setIsRefreshing] = useState(false);

    const fetchChecklists = async () => {
        setIsRefreshing(true);
        try {
            const data = await checklistRepository.getChecklists();
            setChecklists(data);
        } catch (error) {
            console.error('获取清单失败:', error);
        } finally {
            setIsRefreshing(false);
        }
    };

    useEffect(() => {
        fetchChecklists();
    }, []);

    return (
        <ScrollView 
            refreshControl={
                <RefreshControl 
                    refreshing={isRefreshing} 
                    onRefresh={fetchChecklists} 
                />
            }
        >
            {checklists.map((checklist, index) => (
                <Text key={index}>{checklist.name}</Text>
            ))}
        </ScrollView>
    );
};

关键修复点说明 #

• map返回元素：将map内部改为带括号的箭头函数自动返回元素，同时给每个列表项添加key属性（React列表渲染要求）
• 修正刷新状态：RefreshControl的refreshing直接绑定isRefreshing，在请求的finally块中重置刷新状态，确保无论请求成功或失败都能结束刷新
• 异常处理：用try/catch/finally包裹异步请求，避免请求失败时组件一直处于刷新状态

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