useContext 在我的反应代码中不起作用

Question

应用组件：

    import React,{createContext} from "react";
    import "./style.css";
    import A from "./A";
    
    export const userContext =createContext();
    
    function App() {
      return (
        <userContext.Provider name={"samuel"}>
          <div>
            <A />
          </div>
        </userContext.Provider>
      );
    }
    export default App;

组件 A

    import React from 'react';
    import B from './B';
    function A(){
      return (<div>
      <h3>Component A </h3>
      <B />
      </div>)
    }
    
    export default A;

组件 B：

        import React, { useContext } from "react";
        import {userContext} from "./App";
    
    function B() {
      const name = useContext(userContext);
      return (
        <div>
          <h3>Component B{name} </h3>
        </div>
      );
    }
    
    export default B;

我在 App 组件中传递的上下文值没有在组件 B 中被消耗。

上下文用于将数据直接传递给组件，而不是传递给目标组件路径中的每个组件。 这样不需要数据的组件就无法访问它。 我在接收器组件中使用 useContext 挂钩而不是 Context.consumer api。

Answer 1

您必须将value 传递给Provider，在这种情况下您想要传递一个字符串，而您之前传递的对象是错误的关键字name。

我发现的另一个问题是您使用B 从上下文中提取value，但您没有将其置于可以访问上下文的组件的范围内：

function App() {
  return (
    <userContext.Provider value="samuel">
      <div>
        <A />
        <B />
      </div>
    </userContext.Provider>
  );
}
export default App;

现在可以使用了，您可以查看codesandbox。