Question

我正在处理联系表格，昨晚完成了前端。我收到此错误，提示无效挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
你可能违反了钩子规则
您可能在同一个应用中拥有多个 React 副本

我对 React 还是有点陌生，所以我看了很多教程，但在这一点上我很困惑。我还应该补充一点，我是在 CodeSandbox 中构建的，当沙箱加载时，一切看起来都很好。直到我添加了几个依赖项，错误才触发。这是组件的完整内容：

    import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Footer from "./Footer";
import { Container } from "react-bootstrap";
import axios from "axios";

class EmailMessage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      email: "",
      message: ""
    };
  }

  handleSubmit(e) {
    e.preventDefault();
    axios({
      method: "POST",
      url: "http://localhost:3002/send",
      data: this.state
    }).then((response) => {
      if (response.data.status === "success") {
        alert("Message Sent.");
        this.resetForm();
      } else if (response.data.status === "fail") {
        alert("Message failed to send.");
      }
    });
  }

  resetForm() {
    this.setState({ name: "", email: "", message: "" });
  }

  render() {
    return (
      <Container fluid="sm">
        <div className="EmailMessage" style={{ paddingTop: 50 }}>
          <h1>Contact Us</h1>
          <p>
            You've had a chance to learn about us, now let's learn about you and
            your vision...
          </p>
          <form
            id="contact-form"
            onSubmit={this.handleSubmit.bind(this)}
            method="POST"
          >
            <div className="form-group">
              <label htmlFor="name">Name</label>
              <input
                type="text"
                className="form-control"
                id="name"
                value={this.state.name}
                onChange={this.onNameChange.bind(this)}
              />
            </div>
            <div className="form-group">
              <label htmlFor="exampleInputEmail1">Email address</label>
              <input
                type="email"
                className="form-control"
                id="email"
                aria-describedby="emailHelp"
                value={this.state.email}
                onChange={this.onEmailChange.bind(this)}
              />
            </div>
            <div className="form-group">
              <label htmlFor="message">Message</label>
              <textarea
                className="form-control"
                rows="5"
                id="message"
                value={this.state.message}
                onChange={this.onMessageChange.bind(this)}
              />
            </div>
            <button type="submit" className="btn btn-success">
              Submit
            </button>
          </form>
        </div>
        <Footer />
      </Container>
    );
  }

  onNameChange(event) {
    this.setState({ name: event.target.value });
  }

  onEmailChange(event) {
    this.setState({ email: event.target.value });
  }

  onMessageChange(event) {
    this.setState({ message: event.target.value });
  }
}

export default EmailMessage;

感谢您的帮助！这个网站是如此宝贵的资源！

按请求编辑，页脚组件：

import React from "react";
import Container from "react-bootstrap/Container";

function Footer() {
  const year = new Date().getFullYear();
  return (
    <Container fluid="sm">
      <footer style={{ paddingTop: "20", color: "darkOrange" }}>
        <p>Made with Passion at Gingersnap Studios ⓒ {year}</p>
      </footer>
    </Container>
  );
}

export default Footer;

在 ReactJS 中获取无效钩子调用的错误

0 个答案: