React上下文DefaultValue在组件树周围没有提供的提供商时返回未定义

Question

我一直在阅读React文档以刷新我的概念。阅读时，我在上下文部分中遇到了此声明：

传递给函数的值参数将等于值 在树上的此上下文中最接近的提供商的道具。如果 上面没有此上下文的提供者，价值参数将 等于传递给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>

请注意，我有两个组件。这些组件返回在浏览器上呈现的绳子，说明要穿哪种衣服。组件名称＆lt; wearprada/＆gt;是由提供商包裹的，另一个（＆lt; wearlacoste/＆gt;）不是要测试> DefaultValue方案。

以下是我的上下文文件（OffitContext.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>

我的问题是：

包裹在提供商中的组件的行为是预期的。它获得 state 值在上下文中初始化。但是，正如文档中所声称的那样，未包装在提供商中的组件仍然获得不确定的值，而不是defaultValue是lacoste .js）。我在这里做错了吗？事先感谢您的帮助。

Answer 1

看来您已将对象{oftfit：string}与简单的字符串混合。上下文值有望是任何地方的对象，但是在设置默认值时，您使用字符串。

我相信您想要的是const myoutfitContext = react.CreateContext（{offit：“ lacoste”}）;