在 React 中使用 useContext 不会给我预期的数据

Question

我一直在关注一些 React Hooks 教程来使用useContext。

在父组件中，我创建了一个新的上下文，

export const Context = createContext({fakeData: 'fake'})

然后在其中一个子组件中，我尝试通过执行以下操作来访问此数据，

console.log('fakeData1', useContext(Context))
const context = useContext(Context)
console.log('fakeData2', context)

然后我从父组件导入了Context。

在我的console.log中，fakeData2给了我未定义，但fakeData1给了我

{$$typeof: Symbol(react.context), _calculateChangedBits: null, _currentValue: undefined, _currentValue2: {…}, _threadCount: 0, …}
$$typeof: Symbol(react.context)
Consumer: {$$typeof: Symbol(react.context), _context: {…}, _calculateChangedBits: null, …}
Provider:
$$typeof: Symbol(react.provider)
_context: {$$typeof: Symbol(react.context), _calculateChangedBits: null, _currentValue: {…}, _currentValue2: {…}, _threadCount: 0, …}
__proto__: Object
_calculateChangedBits: null
_currentRenderer: {}
_currentRenderer2: null
_currentValue: {fakeData: "fake"}
_currentValue2: {fakeData: "fake"}
_threadCount: 0
__proto__: Object

由于它在Context中有数据，我假设导入成功，但我不确定为什么我不能直接通过

const context = useContext(Context)
console.log('fakeData2', context)

我假设这个对象有一个名为fakeData的字段，但它没有。

有什么帮助吗？

Answer 1

可以通过上下文提供程序的value属性在上下文中包含所需的默认值，而不是将它们传递到createContext中。

我的意思是：

// context.js
import { createContext } from "react";
export const Context = createContext(); // leave empty
// app.js
import React from "react";
import { Context } from "./context";
import Child from "./Child";
export default function App() {
return (
<Context.Provider value={{ fakeData: "test" }}> {/* pass default here */}
<div className="App">
<Child />
</div>
</Context.Provider>
);
}
// Child.js
import React, { useContext } from "react";
import { Context } from "./context";
export default () => {
const { fakeData } = useContext(Context);
return <div>{fakeData}</div>;
};

这是一个代码沙盒，显示了上面的工作代码。

我不完全确定为什么原始方法不起作用，但我在自己的项目中也注意到了这一点。如果我确切地找出原因，我会在这篇文章中添加一个编辑并给出解释。

Answer 2

正如 React Docs 中提到的：

const MyContext = React.createContext(defaultValue);

创建上下文对象。当 React 渲染订阅此 Context 对象的组件时，它将从树中与其上方最接近匹配Provider读取当前上下文值。
仅当组件在树中没有匹配的提供程序时，才使用defaultValue参数。这对于在不包装组件的情况下单独测试组件很有帮助。
注意：将undefined作为提供程序值传递不会导致使用组件使用defaultValue。

因此，如果您在组件树中的组件上方渲染了Context.Provider，您将获得作为 prop 传递给它的值value而不是defaultValue。