Блог

Я работал над своей формой реакции, и у меня есть следующие коды:

 import { useState } from "react";

const SignupComponent = () => {
  const [values, setValues] = useState({
    name: "",
    email: "",
    password: "",
    error: "",
    loading: false,
    message: "",
    showForm: true,
  });

  const { name, email, password, error, loading, message, showForm } = values;

  const handleSubmit = (e) => {
    e.preventDefault();
    console.table({ name, email, password, error, loading, message, showForm });
  };

  const handleChange = (name) => (e) => {
    setValues({ ...values, error: false, [name]: e.target.value });
  };

  const signupForm = () => {
    return (
      <form onSubmit={handleSubmit}>
        <div className="form-group mt-3">
          <input
            onChange={handleChange("name")}
            type="text"
            className="form-control"
            placeholder="Type your name"
            value={name}
          />
        </div>

        <div className="form-group mt-3">
          <input
            onChange={handleChange("email")}
            type="email"
            className="form-control"
            placeholder="Type your email"
            value={email}
          />
        </div>

        <div className="form-group mt-3">
          <input
            onChange={handleChange("password")}
            type="password"
            className="form-control"
            placeholder="Type your password"
            value={password}
          />
        </div>

        <div className="form-group mt-3">
          <div className="btn btn-primary">Signup</div>
        </div>
      </form>
    );
  };

  return <>{signupForm()}</>;
};

export default SignupComponent;
 

Когда я посещаю свою форму и заполняю поля, она должна на самом деле работать.запишите значения имени, электронной почты и т.д.. Тем не менее, он повторяет следующие ошибки:

 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Link`.
    at NavbarBrand (http://localhost:3000/_next/static/chunks/pages/signup.js?ts=1620610614705:48922:25)
    at Link (http://localhost:3000/_next/static/chunks/pages/signup.js?ts=1620610614705:1587:19)
    at nav
    at Navbar (http://localhost:3000/_next/static/chunks/pages/signup.js?ts=1620610614705:48863:22)
    at div
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1620610614705:8388:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1620610614705:8876:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1620610614705:9012:25)
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
renderReactElement @ index.tsx:524
doRender @ index.tsx:793
_callee2$ @ index.tsx:425
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ main.js?ts=1620610614705:1
react-dom.development.js:67 Warning: Expected server HTML to contain a matching <a> in <a>.

  
 

Есть идеи, что вызывает это, почему форма не console.log? Я проверил каждое поле формы.

Вы, вероятно, назначили ссылку на SignupComponent или какой-либо другой функциональный компонент.

 <SignupComponent ref={someRef}>
 

Компонентам функций нельзя указывать ссылки, потому что у них нет экземпляра. Удаление ссылки исправит предупреждение, или вы можете перенаправить ссылку, если хотите назначить ссылку на какое-либо поле ввода в вашем компоненте.

Дополнительная информация о пересылке ссылок: https://reactjs.org/docs/forwarding-refs.html