Javascript Don'；t在React中提交表格。使用反作用钩形

也许我不明白什么。 这里可能需要一些ID，或者不应该重复react hook中输入的名称。 此外，登记表使用完全相同的代码非常有效，在我看来，我已经彻底研究了所有内容，没有任何差异。 我试着在登记册上写下其他名字。但是当事件被删除时，会发生重定向，尽管它根本不在登录页面的代码中。 代码组件：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { schema } from '@src/shared/schema';

import Input from '@src/components/UI/Input/Input';
import Button from '@src/components/UI/Button/Button';
import Loader from '@src/components/Loader/Loader';
import { signIn } from '@src/store/actions/authActions';

const SignInPage = props => {
  const loading = useSelector(state => state.auth.loading);
  const error = useSelector(state => state.auth.error);
  const dispatch = useDispatch();
  const submitForm = auth => dispatch(signIn(auth));
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: 'onBlur', resolver: yupResolver(schema) });

  const submitSignInHandler = data => {
    console.log(data);
    submitForm(data);
  };

  return (
    <div className="sign-in-page">
      <h2 className="sign-in-page__title">Sign In</h2>
      <form id="sign-in" className="sign-in-page__form" onSubmit={handleSubmit(submitSignInHandler)}>
        <Input
          label="Mail"
          type="email"
          errors={!!errors.email}
          errorsMessage={errors?.email?.message}
          placeholder="johnabrams@mail.com"
          {...register('email')}
        />
        <Input
          label="Password"
          type="password"
          errors={!!errors.password}
          errorsMessage={errors?.password?.message}
          placeholder="d22DAsc4ee"
          {...register('password')}
        />
        {loading && <Loader />}
        <Button type="submit" disabled={loading || error}>
          Sign In
        </Button>
        {error && <p>{error.message}</p>}
      </form>
    </div>
  );
};

export default SignInPage;

从“React”导入React；
从“react-redux”导入{useSelector，useDispatch}；
从“react hook form”导入{useForm}；
从'@hookform/resolvers/yup'导入{yupResolver}；
从'@src/shared/schema'导入{schema}；
从'@src/components/UI/Input/Input'导入输入；
从“@src/components/UI/Button/Button”导入按钮；
从'@src/components/Loader/Loader'导入加载程序；
从'@src/store/actions/authActions'导入{signIn}；
const signipage=props=>{
常量加载=使用选择器（state=>state.auth.load）；
const error=useSelector（state=>state.auth.error）；
const dispatch=usedpatch（）；
const submitForm=auth=>dispatch（签名（auth））；
常数{
登记
手推，
formState:{errors}，
}=useForm（{mode:'onBlur'，解析器：yupressolver（schema）}）；
const submitsignnhandler=数据=>{
控制台日志（数据）；
提交表格（数据）；
};
返回(
登录
{加载&&}
登录
{error&{error.message}
}
);
};
导出默认签名；

类似的代码非常有效：

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { schema } from '@src/shared/schema';
import parsePhoneNumberFromString from 'libphonenumber-js';

import Input from '@src/components/UI/Input/Input';
import Button from '@src/components/UI/Button/Button';
import Loader from '@src/components/Loader/Loader';
import { signUp } from '@src/store/actions/authActions';
import { Redirect } from 'react-router';

const SignUpPage = props => {
  const loading = useSelector(state => state.auth.loading);
  const error = useSelector(state => state.auth.error);
  const dispatch = useDispatch();
  const submitForm = (info, auth) => dispatch(signUp(info, auth));
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: 'onBlur', resolver: yupResolver(schema) });
  const [successfulSubmit, setSuccessfulSubmit] = useState(false);

  const normalizePhoneNumber = value => {
    const phoneNumber = parsePhoneNumberFromString(value);
    if (!phoneNumber) {
      return value;
    }
    return phoneNumber.formatInternational();
  };

  const submitSignUpHandler = data => {
    const info = { name: data.name, phone: data.phone };
    const auth = { email: data.email, password: data.password };

    submitForm(info, auth);
    if (!loading && !error) {
      setSuccessfulSubmit(true);
    }
  };

  return (
    <div className="sign-up-page">
      <h2 className="sign-up-page__title">Sign Up</h2>
      <form id="sign-up" className="sign-up-page__form" onSubmit={handleSubmit(submitSignUpHandler)}>
        <Input
          label="Name"
          errors={!!errors.name}
          errorsMessage={errors?.name?.message}
          placeholder="John"
          {...register('name')}
        />
        <Input
          label="Mail"
          type="email"
          errors={!!errors.email}
          errorsMessage={errors?.email?.message}
          placeholder="johnabrams@mail.com"
          {...register('email')}
        />
        <Input
          label="Password"
          type="password"
          errors={!!errors.password}
          errorsMessage={errors?.password?.message}
          placeholder="d22DAsc4ee"
          {...register('password')}
        />
        <Input
          label="Phone"
          type="tel"
          errors={!!errors.phone}
          errorsMessage={errors?.phone?.message}
          onChange={event => {
            event.target.value = normalizePhoneNumber(event.target.value);
          }}
          placeholder="+7 999 777 20 20"
          {...register('phone')}
        />
        {loading && <Loader />}
        <Button type="submit" disabled={loading || error}>
          Sign Up
        </Button>
        {error && <p>{error.message}</p>}
      </form>
      {successfulSubmit && <Redirect to="/sign-in" />}
    </div>
  );
};

export default SignUpPage;errors={!!errors.name}
          errorsMessage={errors?.name?.message}
          placeholder="John"
          {...register('name')}
        />
        <Input
          label="Mail"
          type="email"
          errors={!!errors.email}
          errorsMessage={errors?.email?.message}
          placeholder="johnabrams@mail.com"
          {...register('email')}
        />
        <Input
          label="Password"
          type="password"
          errors={!!errors.password}
          errorsMessage={errors?.password?.message}
          placeholder="d22DAsc4ee"
          {...register('password')}
        />
        <Input
          label="Phone"
          type="tel"
          errors={!!errors.phone}
          errorsMessage={errors?.phone?.message}
          onChange={event => {
            event.target.value = normalizePhoneNumber(event.target.value);
          }}
          placeholder="+7 999 777 20 20"
          {...register('phone')}
        />
        {loading && <Loader />}
        <Button type="submit" disabled={loading || error}>
          Sign Up
        </Button>
        {error && <p>{error.message}</p>}
      </form>
      {successfulSubmit && <Redirect to="/sign-in" />}
    </div>
  );
};

export default SignUpPage;

import React，{useState}来自“React”；
从'react redux'导入{useDispatch，useSelector}；
从“react hook form”导入{useForm}；
从'@hookform/resolvers/yup'导入{yupResolver}；
从'@src/shared/schema'导入{schema}；
从“libphonenumber js”导入parsePhoneNumberFromString；
从'@src/components/UI/Input/Input'导入输入；
从“@src/components/UI/Button/Button”导入按钮；
从'@src/components/Loader/Loader'导入加载程序；
从'@src/store/actions/authActions'导入{signUp}；
从“react router”导入{Redirect}；
const SignUpPage=props=>{
常量加载=使用选择器（state=>state.auth.load）；
const error=useSelector（state=>state.auth.error）；
const dispatch=usedpatch（）；
const submitForm=（info，auth）=>dispatch（注册（info，auth））；
常数{
登记
手推，
formState:{errors}，
}=useForm（{mode:'onBlur'，解析器：yupressolver（schema）}）；
const[successfulSubmit，setSuccessfulSubmit]=useState（false）；
常量normalizePhoneNumber=值=>{
const phoneNumber=parsePhoneNumberFromString（值）；
如果（！电话号码）{
返回值；
}
返回phoneNumber.formatInternational（）；
};
const submitSignUpHandler=数据=>{
const info={name:data.name，phone:data.phone}；
const auth={email:data.email，密码：data.password}；
提交表格（信息、认证）；
如果（！加载&&！错误）{
setSuccessfulSubmit（true）；
}
};
返回(
注册
{
event.target.value=normalizePhoneNumber（event.target.value）；
}}
占位符=“+7 999 777 20”
{…注册（'phone'）}
/>
{加载&&}
注册
{error&{error.message}
}
{成功提交&&}
);
};
导出默认签名；errors={！！errors.name}
errorsMessage={errors？.name？.message}
占位符=“约翰”
{…寄存器（'name'）}
/>
{
event.target.value=normalizePhoneNumber（event.target.value）；
}}
占位符=“+7 999 777 20”
{…注册（'phone'）}
/>
{加载&&}
注册
{error&{error.message}
}
{成功提交&&}
);
};
导出默认签名；

我不明白原因，但我创建了一个新的模式，表单开始工作