React Context defaultValue returns undefined 当组件树周围没有提供者时

Question

我一直在阅读 React 文档来刷新我的概念。在阅读时，我在上下文部分看到了这个语句：

The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the value argument will be equal to the defaultValue that was passed to createContext().

所以很自然地，我创建了一些片段来实际测试场景。

我的切入点（App.js）：

import "./styles.css";
import WearLacoste from "./wearLacoste";
import WearPrada from "./wearPrada";
import OutFitProvider from "./outfitContext";

export default function App() {
  return (
    <div className="App">
      <h1>What to wear?</h1>
      <OutFitProvider>
        <WearPrada />
      </OutFitProvider>
      <WearLacoste />
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

注意我有两个组件。这些组件 return 在浏览器上呈现一个字符串，告诉您穿哪件衣服。其中一个组件名称 <WearPrada /> 由提供程序包装，另一个 (<WearLacoste/>) 未包装，以测试 defaultValue 场景。

以下是我的上下文文件 (outfitContext.js):

import React, { useContext, useState } from "react";

const MyOutfitContext = React.createContext("Lacoste");

//a custom hook to consume context
export const useOutfit = () => {
  return useContext(MyOutfitContext);
};

const OutfitContextProvider = ({ children }) => {
  const [outfit, setOutfit] = useState("Prada");

  return (
    <MyOutfitContext.Provider value={{ outfit }}>
      {children}
    </MyOutfitContext.Provider>
  );
};

export default OutfitContextProvider;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

最后是我的两个组件，它们执行完全相同的操作。

wearPrada.js :

import { useOutfit } from "./outfitContext";

const WearPrada = () => {
  const { outfit } = useOutfit();
  console.log("Outfit expects Prada", outfit);
  return <h1>Wearing {outfit} RN </h1>;
};

export default WearPrada;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

wearLacoste.js :

import { useOutfit } from "./outfitContext";

const WearLacoste = () => {
  const { outfit } = useOutfit();
  console.log("Outfit expects Lacoste", outfit);
  return <h1>Wearing {outfit} RN </h1>;
};

export default WearLacoste;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我的问题是：

封装在提供程序中的组件按预期运行。它获取在 context 中初始化的 state 值。但正如文档中所声称的那样，未包装在提供者中的组件仍然获得 undefined 值而不是 defaultValue ，即 Lacoste（请参阅 outfitContext.js）。我在这里做错了什么吗？在此先感谢您的帮助。

Answer 1

您似乎将对象 { outfit: string } 与一个简单的字符串混合在一起。上下文值在任何地方都应该是一个对象，但是在设置默认值时，您使用的是字符串。

我相信你想要的是const MyOutfitContext = React.createContext({ outfit: "Lacoste" });

React Context defaultValue returns undefined 当组件树周围没有提供者时

React Context defaultValue returns undefined when no provider is wrapped around the component tree

javascript

reactjs

react-context

react-hooks