React.useContext 显示为未定义
Posted
技术标签:
【中文标题】React.useContext 显示为未定义【英文标题】:React.useContext appearing as undefined 【发布时间】:2021-12-25 02:35:54 【问题描述】:这是我第一次在应用程序中使用 React 上下文挂钩,我的上下文默认值一直显示为“未定义”。
到目前为止的故障排除:
我已确保 React.createContext 位于单独的文件 (context.js) 中 我已确保子组件包含在 Provider 中 我正在为 React.createContext() 提供一个默认值我的所有代码都可以在下面的 CodeSandbox 链接中找到:
https://codesandbox.io/s/react-context-troubleshooting-ojnb2?file=/src/child.js
如果有任何建议,我将不胜感激!
【问题讨论】:
请在子文件中进行以下更改 const selectedBackground = useContext(SelectedBackgroundContext); 【参考方案1】:在您的 App.js 文件中,您将传递 value
一个字符串:
import React, useContext from "react";
import SelectedBackgroundContext from "./context";
import Child from "./child";
function App()
const selectedBackground = useContext(SelectedBackgroundContext);
// selectedBackground is just a string, so value = "https://...", which is invalid, the value, in your case, should be an object
return (
<SelectedBackgroundContext.Provider value=selectedBackground>
<Child />
</SelectedBackgroundContext.Provider>
);
export default App;
相反,value
需要是一个对象,具有包含字符串的 selectedBackground
属性:
import React, useContext from "react";
import SelectedBackgroundContext from "./context";
import Child from "./child";
function App()
const selectedBackground, selectBackground = useContext(
SelectedBackgroundContext
);
// alternatively, just collect all context, without destructuring,
// and pass it to the "value" prop: value=context
// const context = useContext(SelectedBackgroundContext);
// you're also missing the "selectBackground" function, which should be added to this "value" prop
return (
<SelectedBackgroundContext.Provider
value= selectedBackground, selectBackground
>
<Child />
</SelectedBackgroundContext.Provider>
);
export default App;
由于您使用对象创建了上下文:
selectedBackground:
"https://lp-cms-production.imgix.net/2019-06/81377873%20.jpg?fit=crop&q=40&sharp=10&vib=20&auto=format&ixlib=react-8.6.4",
selectBackground: () =>
提供者的value
属性也应该是一个对象!
value= selectedBackground, selectBackground
工作演示:
【讨论】:
【参考方案2】:我已将您的代码更改为以下代码及其工作。
import React, useContext from "react";
import SelectedBackgroundContext from "./context";
export default function Child()
const selectedBackground = useContext(SelectedBackgroundContext);
// you can comment out line5 above and uncomment line7 below to verify all other code works
//let selectedBackground = 'https://lp-cms-production.imgix.net/2019-06/81377873%20.jpg?fit=crop&q=40&sharp=10&vib=20&auto=format&ixlib=react-8.6.4'
const renderSelected = (context) =>
console.log("Background img src is: " + context); //appears as undefined
if (context)
return (
<img
style= height: "200px"
src=context
key=context + "Thumbnail"
alt="thumbnail of " + context
/>
);
else
return <p>None</p>;
;
return (
<div>
<p>Background:</p> renderSelected(selectedBackground)
</div>
);
因为您没有从上下文值传递对象,所以不需要
const selectedBackground = useContext(SelectedBackgroundContext);
更多关于解构变量 https://www.javascripttutorial.net/es6/javascript-object-destructuring/
【讨论】:
以上是关于React.useContext 显示为未定义的主要内容,如果未能解决你的问题,请参考以下文章