将 React Hooks 用于数据提供者和数据上下文

Question

I am currently reworking my DataProvider , updating it from a class component to a functional component with React Hooks.

I believe my issue is in the way I am setting up my context consumer but I haven't found a good way to test this.

DataProvider.js

import React, { createContext } from "react";

const DataContext = createContext();

export const DataProvider = (props) => {
  const [test, setTest] = React.useState("Hello");

  return (
    <DataContext.Provider value={test}>{props.children}</DataContext.Provider>
  );
};
export const withContext = (Component) => {
  return function DataContextComponent(props) {
    return (
      <DataContext.Consumer>
        {(globalState) => <Component {...globalState} {...props} />}
      </DataContext.Consumer>
    );
  };
};

So my withContext function should receive a component and pass it the props of the Context Provider.

I try to pull in my test state into a component.

import React from "react";
import style from "./DesktopAboutUs.module.css";
import { withContext } from "../../DataProvider";

const DesktopAboutUs = ({ test }) => {
  return (
    <div className={style.app}>
      <div>{test}</div>

    </div>
  );
};

export default withContext(DesktopAboutUs);

No data is showing up for test . To me this indicates that my withContext function is not properly receiving props from the Provider .

Answer 1

Because you passed value={test} , globalState is a string, not an object with a test property.

Either of these solutions will result in what you expected:

• Pass an object to the value prop of DataContext.Provider using value={{ test }} instead of value={test} if you intend globalState to contain multiple props.
• Pass globalState to the test prop of Component using test={globalState} instead of {...globalState} if you do not intend globalState to contain multiple props.

 const DataContext = React.createContext(); const DataProvider = (props) => { const [test, setTest] = React.useState("Hello"); return ( <DataContext.Provider value={{ test }}> {props.children} </DataContext.Provider> ); }; const withContext = (Component) => (props) => ( <DataContext.Consumer> {(globalState) => <Component {...globalState} {...props} />} </DataContext.Consumer> ); const DesktopAboutUs = ({ test }) => ( <div>{test}</div> ); const DesktopAboutUsWithContext = withContext(DesktopAboutUs); ReactDOM.render( <DataProvider> <DesktopAboutUsWithContext /> </DataProvider>, document.querySelector('main') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <main></main>