React-native useContext 返回 undefined答案

【问题标题】：React-native useContext returns undefinedReact-native useContext 返回 undefined
【发布时间】：2020-03-19 16:25:38
【问题描述】：

我正在尝试学习 react 并停留在 useContext。我试图导出 Provider 并更改来自 provider 的值数据，但它仍然返回 undefined ！我的上下文

import React from 'react';

const BlogContext = React.createContext();

export const BlogProvider = ({ children }) => {
    const blogPosts = [
        { title: "Blog Post #1" },
        { title: "Blog Post #2" }
    ];

    return (
        <BlogContext.Provider value={blogPosts}>
            {children}
        </BlogContext.Provider>
    );
};

export default BlogContext;

我的屏幕

import React, { useContext } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { BlogContext } from '../context/BlogContext';

const IndexScreen = () => {
    const blogPosts = useContext(BlogContext);
    console.log(blogPosts);

    return (
        <View>
            <Text>Index Screen</Text>
        </View>
    );
};

const styles = StyleSheet.create({

});

export default IndexScreen;

【问题讨论】：

你错过了BlogContext.Consumer

标签： reactjs react-native

【解决方案1】：

当您使用export const ... 时，您使用大括号{ } 导入它
如果您使用了export default ...，您应该导入不带大括号。

所以你已经混合了它：

// just export the context
export const BlogContext = createContext()

const BlogProvider = ({ children }) => {
  const blogPosts = [...]

  return (
    <BlogContext.Provider value={blogPosts}>
      {children}
    </BlogContext.Provider>
  )
}
// export default the component
export default BlogProvider

其次，您需要用BlogProvider 组件包装您的应用：

// App.js
import React from "react"
import BlogProvider from "./context/AppContext" 
import IndexScreen from "./screens/IndexScreen"

const App = () => {
  return (
    <BlogProvider>
      <IndexScreen />
      // More screens...
    </BlogProvider>
  )
}

export default App

这是一个有效的codeSandbox 示例。

【讨论】：