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 hook 而不是 Context.consumer api。

Answer 1

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

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

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

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