React Native中使用useContext传值时消费组件获取值为undefined的问题求助

嘿，我一眼就发现你代码里的两个关键问题啦，这就是导致你拿到undefined的核心原因：

问题1：你没导出创建的DataContext对象 #

在你的Context文件里，你只导出了DataProvider组件，但用于消费数据的DataContext实例并没有对外导出，导致消费组件根本没法获取到这个Context对象。

问题2：消费Context时用错了对象 #

在GoalScorersScreen里，你导入并传给useContext的是DataProvider（这是用来包裹组件的提供者），但useContext需要的是你最初创建的DataContext实例，而不是Provider组件本身。

修正步骤： #

1. 先修正Context文件，导出DataContext
   把你的DataContext.js改成这样：

import React from 'react';

// 导出DataContext，让其他组件可以导入使用
export const DataContext = React.createContext();

export const DataProvider = ({ children }) => {
  return <DataContext.Provider value={245}>{children}</DataContext.Provider>;
};

2. 修正消费组件的导入和useContext调用
   在GoalScorersScreen里，把导入改成DataContext，并传给useContext：

// 替换原来的DataProvider导入，改成DataContext
import { DataContext } from '../context/DataContext';

const GoalScorersScreen = () => {
  // 这里用DataContext而不是DataProvider
  const value = useContext(DataContext);
  console.log('value 20: ', value); // 现在应该输出245了！
  
  // 剩下的代码保持不变
  return (
    <ScrollView style={styles.container}>
      <FlatList
        data={TOP_GOAL_SCORERS}
        renderItem={({ item }) => (
          <Item 
            name={item.name} 
            value={value} 
            goals={item.goals} 
            team={getShortTeamName(item.team)} 
          />
        )}
        keyExtractor={(item) => item.name}
      />
    </ScrollView>
  );
};

额外小提示 #

你可以给createContext设置一个默认值，比如React.createContext(null)，这样如果组件不小心在Provider外使用这个Context，不会直接拿到undefined，调试起来会更直观哦～

备注：内容来源于stack exchange，提问作者Muirik