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 中没有被消耗。

Context 用于将数据直接传递给组件，而不是传递给目标组件路径中的每个组件。这样不需要数据的组件就无法访问它。我在接收器组件中使用 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。

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

1 个答案: