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

Question

获取以下错误。请帮忙。第9:36行：不能在类组件中调用React钩子“useContext”。必须在React函数组件或自定义React钩子函数中调用React钩子。React钩子/钩子规则第9:47行：“AccountContext”未定义未定义未定义第126:37行：“switchToSignup”未定义未定义未定义

搜索关键字以了解有关每个错误的更多信息。

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。消费者直接购买，例如：

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

您似乎还忘记导入AccountContext。您还需要确保AccountContext。提供商安装在应用程序树中此组件上方的某个位置。要阅读有关React上下文的更多信息，请查看文档。