当组件树周围没有任何提供程序时，React Context defaultValue返回undefined

Question

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

传递给函数的值参数将等于上面树中此上下文的最近提供者的prop。如果上面没有此上下文的提供程序，value参数将等于传递给createContext((的defaultValue。

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

我的切入点(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>

请注意，我有两个组件。这些组件返回一个在浏览器上渲染的字符串，告诉您要穿哪件衣服。其中一个组件名称<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>

我的问题是：

提供程序中包装的组件的行为符合预期。它获取在上下文中初始化的状态值。但正如文档中所说，未封装在提供程序中的组件仍然得到undefined值，而不是defaultValue，即Lacoste(请参阅outitContext.js(。我在这里做错了什么吗？提前感谢您的帮助。

Answer 1

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

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