React useContext 抛出无效的钩子调用错误

我正在尝试使用 useContext 将值从上下文提供程序传递给使用者，并在渲染函数外部访问该值。

我的提供程序如下所示：

export const AppContext = React.createContext();
export class App extends React.Component(){
    render(){
        <AppContext.Provider value={{ name: 'John' }} ><Main /></AppContext>   
    }
}

我的消费者看起来像这样

import React, { useContext } from 'react';
import { AppContext } from './App';
export class Main extends React.Component(){
    componentDidMount(){
        const value = useContext(AppContext);
    }
    render(){
        return (
            <div>Main Component</div>
        )
    }
}

错误是这样的：

无效的挂钩调用。钩子只能在函数组件的主体内部调用。

如果你想使用钩子，它们是为函数组件设计的。这样：

import React, { useContext } from 'react';
import { AppContext } from './App';
const Main = () => {
  const value = useContext(AppContext);
  return(
    <div>Main Component</div>
  );
}

如果你想在基于类的组件中使用它，那么只需在你的类中将其设置为静态 contextType，然后你可以在你的组件中使用它与this.context一起使用，如下所示：

import React from 'react';
import { AppContext } from './App';
class Main extends React.Component(){
  static contextType = AppContext;
  componentDidMount(){
    const value = this.context;
  }
  render(){
    return (
      <div>Main Component</div>
    )
  }
}

编辑：从应用组件中删除上下文，并将其放在自己的组件中。我认为您在导出上下文时遇到了冲突。

因此，您的应用组件应如下所示：

import React from "react";
import Context from "./Context";
import Main from "./Main";
class App extends React.Component {
  render() {
    return (
      <Context>
        <Main />
      </Context>
    );
  }
}
export default App;

您的主要组件应如下所示：

import React from "react";
import { AppContext } from "./Context";
class Main extends React.Component {
  static contextType = AppContext;
  render() {
    return <div>{this.context.name}</div>;
  }
}
export default Main;

您的上下文组件应如下所示：

import React from "react";
export const AppContext = React.createContext();
class Context extends React.Component {
  state = {
    name: "John"
  };
  //Now you can place all of your logic here
  //instead of cluttering your app component
  //using this components state as your context value
  //allows you to easily write funcitons to change
  //your context just using the native setState 
  //you can also place functions in your context value
  //to call from anywhere in your app
  render() {
    return (
      <AppContext.Provider value={this.state}>
        {this.props.children}
      </AppContext.Provider>
    );
  }
}
export default Context;

这是一个沙盒，向您展示它的工作原理 CodSandbox

你得到上面的错误，因为钩子是用来在功能组件内部使用的，而不是类组件，而你试图在组件中使用它DidMount的主组件，这是一个类组件

您可以使用 useContext 钩子重写主组件的代码，例如

import React, { useContext } from 'react';
import { AppContext } from './App';
export const Main =() =>{
    const value = useContext(AppContext);
    return (
        <div>Main Component</div>
    )
}

或者以不同的方式使用上下文，例如

import React from 'react';
import { AppContext } from './App';
class Main extends React.Component {
    componentDidMount(){
        const value = this.context;
        // use value here. Also if you want to use context elsewhere in class
        // you can use if from this.context
    }
    render(){
        return (
            <div>Main Component</div>
        )
    }
}
Main.contextType = AppContext;
export { Main };

钩子仅适用于无状态组件。您正在尝试在类组件中使用它。

这是Main.js文件的内容。如果要使用基于类的组件而不是功能组件，请取消注释部分。

import React from "react";
import { AppContext } from "./App";
/** UNCOMMENT TO USE REACT CLASS COMPONENT */
// class Main extends React.Component() {
//   render() {
//     return (
//       <AppContext.Consumer>
//         {value => <div>It's Main component. Context value is ${value.name}</div>}
//       </AppContext.Consumer>
//     );
//   }
// }
const Main = () => {
  const value = React.useContext(AppContext);
  return <div>It's Main component. Context value is ${value.name}</div>;
};
export default Main;

这是App.js文件的内容。如果要使用基于类的组件而不是功能组件，请取消注释部分。

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
export const AppContext = React.createContext();
/** UNCOMMENT TO USE REACT CLASS COMPONENT */
// export class App extends React.Component() {
//   render() {
//     return (
//       <AppContext.Provider value={{ name: "John" }}>
//         <Main />
//       </AppContext.Provider>
//     );
//   }
// }
const App = () => (
  <AppContext.Provider value={{ name: "John" }}>
    <Main />
  </AppContext.Provider>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

React Hook 是直接为功能组件实现的，以便使它们有可能成为有状态的。基于类的组件始终是有状态的，因此您必须使用它们自己的state API。

工作演示可在此处获得。

相关内容

最新更新

热门标签：