reactjs - useContext 在我的 react 代码中不起作用

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 钩子(Hook)而不是 Context.consumer api。

Answer 1

你必须将一个值传递给Provider，在这种情况下你想传递一个字符串，而你之前传递的是一个带有错误关键字的对象姓名。

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

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

这现在有效，您可以检查 codesandbox .