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>;
};

这是Codesandbox，上面显示了实际的工作代码。

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

Answer 2

如React Docs中所述：

const MyContext = React.createContext(defaultValue);

创建一个Context对象。当React渲染一个订阅此Context对象的组件时，它将从树中它上方最接近的匹配Provider读取当前上下文值。
defaultValue自变量仅在组件树上没有匹配的提供程序时使用。这对于隔离测试组件而不包装它们很有帮助。
注意：将undefined用作提供者值不会导致使用组件使用defaultValue。

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

在React中使用useContext不能给我期望的数据

2 个答案: