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 显示为未定义的主要内容,如果未能解决你的问题,请参考以下文章

React - useContext 返回未定义

React.useContext 没有更新

React - useContext 返回值后加载组件

在使用数据库数据更新上下文后,React 'useContext' 钩子不会重新渲染

React:useContext,如何从外部组件中检索它?

React useContext 值没有从提供者传递过来?