不能在类组件中调用React钩子“useContext”

Question

得到以下错误。请帮帮这个。第9:36行：React钩子“useContext”不能在类组件中调用。React钩子必须在React函数组件或自定义React钩子函数react-hooks/rules-of-hooks第9:47行：“AccountContext”未定义no-undef第126：37行：“switch tosignup”未定义no-undef

import React, { useContext } from "react";
import { BoldLink, BoxContainer, FormContainer, MutedLink, SubmitButton, Input } from "./common";
import { Marginer } from "../marginer";

  
export class LoginForm extends React.Component {
    constructor() {
        const { switchToSignup } = useContext(AccountContext);
    super();
    this.state = {
      input: {},
      errors: {}
    };
     
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
     
  handleChange(event) {
    let input = this.state.input;
    input[event.target.name] = event.target.value;
  
    this.setState({
      input
    });
  }
     
  handleSubmit(event) {
    event.preventDefault();
  
    if(this.validate()){
        console.log(this.state);
  
        let input = {};
        input["email"] = "";
        input["password"] = "";
        this.setState({input:input});
  
        alert('Demo Form is submitted');
    }
  }
  
  validate(){
      let input = this.state.input;
      let errors = {};
      let isValid = true;
   
     
  
      if (!input["email"]) {
        isValid = false;
        errors["email"] = "Please enter your email Address.";
      }
  
      if (typeof input["email"] !== "undefined") {
          
        var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
        if (!pattern.test(input["email"])) {
          isValid = false;
          errors["email"] = "Please enter valid email address.";
        }
      }
  
      if (!input["password"]) {
        isValid = false;
        errors["password"] = "Please enter your password.";
      }
  
  
      if (typeof input["password"] !== "undefined") {
        if(input["password"].length < 6){
            isValid = false;
            errors["password"] = "Please add at least 6 charachter.";
        }
      }
  
  
      this.setState({
        errors: errors
      });
  
      return isValid;
  }
     
  render() {
    return (
            <div>
            <form onSubmit={this.handleSubmit}>
            <BoxContainer>
            <FormContainer>
            <div class="form-group">
            <Input 
            type="text" 
            name="email" 
            value={this.state.input.email}
            onChange={this.handleChange}
            class="form-control" 
            placeholder="Enter email" 
            id="email" />

            <div className="text-danger">{this.state.errors.email}</div>
            </div>

            <div class="form-group">
            <Input 
            type="password" 
            name="password" 
            value={this.state.input.password}
            onChange={this.handleChange}
            class="form-control" 
            placeholder="Enter password" 
            id="password" />

            <div className="text-danger">{this.state.errors.password}</div>
            </div>

            </FormContainer>
            <Marginer direction="vertical" margin={10} />
      <MutedLink href="#">Forget your password?</MutedLink>
      <Marginer direction="vertical" margin="1.6em" />
      <SubmitButton type="submit">Signin</SubmitButton>
      <Marginer direction="vertical" margin="1em" />
      <MutedLink href="#">
        Don't have an accoun?{" "}
        <BoldLink href="#" onClick={switchToSignup}>
          Signup
        </BoldLink>
      </MutedLink>
            </BoxContainer>
            </form>
            </div>
    );
  }
}

Answer 1

正如错误消息所述，您不能混合钩子和类组件。您需要将loginform切换为函数组件，或者直接使用AccountContext.Consumer，类似于：

render() {
  return (
    <AccountContext.Consumer>
      (({ switchToSignup }) => (
        <div>
          // do something with switchToSignup
        </div>
      ))
    </AccountContext.Consumer>
  );
}

看起来您还忘记导入AccountContext。您还需要确保AccountContext.Provider挂载在应用程序树中该组件上方的某个位置。要阅读更多关于React上下文的内容，请查看文档。