请帮助解决问题 React Hook "useRef"

Question

Hello please help to solve the problem.

Page about contact form.

I must get data from with useRef to const {name, email, message}. And I must definitely use useRef

It is error message, and I fixed photo error page:

src/components/Contact/Input.jsx Line 33:38: React Hook "useRef" is called in function "handleSubmit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

How I can fix this problem.

It is source code:

import React, { useState, useRef } from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
      width: "25ch",
    },
  },
}));

const Form = () => {
  const classes = useStyles();

  //

  const [status, setStatus] = useState("Submit");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("Sending...");


    const { name, email, message } = useRef("");
    let details = {
      name: name.value,
      email: email.value,
      message: message.value,
    };

    let response = await fetch("http://localhost:5000/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(details),
    });
    setStatus("Submit");
    let result = await response.json();
    alert(result.status);
  };

  //

  return (
    <div>
      <form className={classes.root} onSubmit={handleSubmit}>
        <TextField
          type="text"
          style={{ color: "white" }}
          inputRef={this.name}
          id="standard-basic"
          label="Name"
        />
        <TextField
          inputRef={this.email}
          required
          type="email"
          style={{ color: "white" }}
          id="standard-basic"
          label="Email"
        />
        <TextField
          inputRef={this.message}
          type="text"
          style={{ color: "white" }}
          id="standard-basic"
          label="Message"
          required
        />
        <Button type="submit" id="contacts1" color="primary">
          {status}
        </Button>
      </form>
    </div>
  );
};

export default Form;

It is error page:

Answer 1

Man i had the same issues, here how i fixed the problem:

1. You don't need to import React in order to use useRef.
2. Just import useRef as UseRef and used it.
3. Enjoy! :D

In your case:

import { useState as UseState, useRef as UseRef } from "react";
.....
const { name, email, message } = UseRef("");

Answer 2

your function "handleSubmit" starts with a small letter, you have to change it to "HandleSubmit". it should work