Javascript 如何在组件重新渲染后将状态变量重置为其初始状态

我正在编写一个完整的堆栈web应用程序来注册用户。我有状态变量来反映后端错误，然后在jsx代码中使用。每当

警报更改时（由redux管理的应用程序级状态，其内容由后端生成），我就会重新呈现组件。我面临的问题是，当我第一次没有输入所需信息并点击提交时，我会在相应的错误输入字段下成功显示错误1秒，然后再发送一个清除警报操作，尽管根据redux devtool更新了
警报
状态，组件中的错误消息在1s后仍然存在。我认为问题在于我需要重置与已清除字段相对应的局部状态变量，但我不确定如何实现。错误记录在下面的
errorsData
状态变量中。这是我的组件

import React, { useState, useEffect } from 'react';
import { setAlert } from '../../actions/alert';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/auth';

const Register = ({ setAlert, alerts, registerUser }) => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    password2: '',
  });
  const [errorsData, setErrorsData] = useState({
    nameErr: '',
    emailErr: '',
    passwordErr: '',
  });

  const { name, email, password, password2 } = formData;
  const { nameErr, emailErr, passwordErr } = errorsData;

  const handleOnChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleOnSubmit = async (e) => {
    e.preventDefault();
    if (password !== password2) {
      console.log('Passwords do not match');
    } else {
      registerUser({ name, email, password });
    }
  };

  useEffect(() => {
    alerts.forEach((alert) => {
      if (alert.errField === 'name') {
        setErrorsData({ ...errorsData, nameErr: alert.msg });
      }
      if (alert.errField === 'email') {
        setErrorsData({ ...errorsData, emailErr: alert.msg });
      }
      if (alert.errField === 'password') {
        setErrorsData({ ...errorsData, passwordErr: alert.msg });
      }
    });
  }, [alerts]);

  return (
    <form className='form' onSubmit={handleOnSubmit}>
      <div className='input-field'>
        <label htmlFor='name'>Name</label>
        <input
          type='text'
          name='name'
          value={name}
          id='name'
          placeholder='Enter your name'
          onChange={handleOnChange}
        />
        <small className='error error--name'>{nameErr}</small>
      </div>
      <div className='input-field'>
        <label htmlFor='email'>Email</label>
        <input
          type='email'
          name='email'
          value={email}
          id='email'
          placeholder='Enter a valid email'
          onChange={handleOnChange}
        />
        <small className='error error--email'>{emailErr}</small>
      </div>
      <div className='input-field'>
        <label htmlFor='password'>Passwrod</label>
        <input
          type='password'
          name='password'
          value={password}
          id='password'
          placeholder='Enter password'
          onChange={handleOnChange}
        />
        <small className='error error--password'>{passwordErr}</small>
      </div>
      <div className='input-field'>
        <label htmlFor='password2'>Confirm password</label>
        <input
          type='password'
          name='password2'
          value={password2}
          id='password2'
          placeholder='Confirm password'
          onChange={handleOnChange}
        />
      </div>
      <input className='submit' type='submit' value='Submit' />
    </form>
  );
};

const mapStateToProps = (state) => ({
  alerts: state.alert,
});

export default connect(mapStateToProps, { setAlert, registerUser })(Register);


import React，{useState，useffect}来自“React”；
从“../../actions/alert”导入{setAlert}；
从'react redux'导入{connect}；
从“../../actions/auth”导入{registerUser}；
常量寄存器=（{setAlert，alerts，registerUser}）=>{
常量[formData，setFormData]=useState({
名称：“”，
电子邮件：“”，
密码：“”，
密码2:“”，
});
常量[errorsData，setErrorsData]=useState({
名称错误：“”，
电子邮件错误：“”，
密码错误：“”，
});
const{name，email，password2}=formData；
const{nameErr，emailErr，passwordErr}=errorsData；
常数变化=（e）=>{
setFormData（{…formData，[e.target.name]：e.target.value}）；
};
const handleOnSubmit=async（e）=>{
e、 预防默认值（）；
如果（密码！==密码2）{
log（“密码不匹配”）；
}否则{
注册服务器（{名称、电子邮件、密码}）；
}
};
useffect（（）=>{
警报。forEach（（警报）=>{
如果（alert.errField=='name'）{
setErrorsData（{…errorsData，nameErr:alert.msg}）；
}
如果（alert.errField=='email'）{
setErrorsData（{…errorsData，EmailError:alert.msg}）；
}
如果（alert.errField==='password'）{
setErrorsData（{…errorsData，passwordErr:alert.msg}）；
}
});
}，[警报]；
返回(
名称
{nameErr}
电子邮件
{emailErr}
帕斯沃德
{passwordErr}
确认密码
);
};
常量mapStateToProps=（状态）=>({
警报：state.alert，
});
导出默认连接（mapstatetops，{setAlert，registerUser}）（寄存器）；
您的组件设置不正确，因为您必须使用
useDispatch
和
usedTypedSelector
对功能组件进行redux操作时，试图将
连接到功能组件。相反，你应该这样做

import React, { useState, useEffect } from "react";

/* Hooks */
**import { useDispatch, useSelector } from "react-redux";**

/* Actions */
import { registerUser } from "../../actions/auth";
import { setAlert } from "../../actions/alert";

const Register = () => {
    // Hooks
    **const dispatch = useDispatch();**

    // Store
    **const alerts = useSelector(state => state.alert);**

    // Local state
    const [formData, setFormData] = useState({
        name: "",
        email: "",
        password: "",
        password2: "",
    });
    const [errorsData, setErrorsData] = useState({
        nameErr: "",
        emailErr: "",
        passwordErr: "",
    });

    const { name, email, password, password2 } = formData;
    const { nameErr, emailErr, passwordErr } = errorsData;

    // Event handlers
    const handleOnChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });

    const handleOnSubmit = async e => {
        e.preventDefault();

        if (password !== password2) console.log("Passwords do not match");
        else dispatch(registerUser({ name, email, password }));
    };

    // Effects
    useEffect(() => {
        alerts.forEach(alert => {
            switch(alert.errField) {
                case "name":
                    setErrorsData({ ...errorsData, nameErr: alert.msg });
                    break;
                case "email":
                    setErrorsData({ ...errorsData, emailErr: alert.msg });
                    break;
                case "password":
                    setErrorsData({ ...errorsData, passwordErr: alert.msg });
                    break;
                default:
                    break;
            };
        });
    }, [alerts, errorsData]);

    // Rendering
    return (
        <form className="form" onSubmit={handleOnSubmit}>
            <div className="input-field">
                <label htmlFor="name">Name</label>
                <input
                    type="text"
                    name="name"
                    value={name}
                    id="name"
                    placeholder="Enter your name"
                    onChange={handleOnChange}
                />
                <small className="error error--name">{nameErr}</small>
            </div>
            <div className="input-field">
                <label htmlFor="email">Email</label>
                <input
                    type="email"
                    name="email"
                    value={email}
                    id="email"
                    placeholder="Enter a valid email"
                    onChange={handleOnChange}
                />
                <small className="error error--email">{emailErr}</small>
            </div>
            <div className="input-field">
                <label htmlFor="password">Passwrod</label>
                <input
                    type="password"
                    name="password"
                    value={password}
                    id="password"
                    placeholder="Enter password"
                    onChange={handleOnChange}
                />
                <small className="error error--password">{passwordErr}</small>
            </div>
            <div className="input-field">
                <label htmlFor="password2">Confirm password</label>
                <input
                    type="password"
                    name="password2"
                    value={password2}
                    id="password2"
                    placeholder="Confirm password"
                    onChange={handleOnChange}
                />
            </div>
            <input className="submit" type="submit" value="Submit" />
        </form>
    );
};

**export default Register;**

import React，{useState，useffect}来自“React”；
/*钩子*/
**从“react redux”导入{useDispatch，useSelector}**
/*行动*/
从“../../actions/auth”导入{registerUser}；
从“../../actions/alert”导入{setAlert}；
常量寄存器=（）=>{
//钩子
**const dispatch=usedpatch（）**
//贮藏
**常量警报=使用选择器（状态=>state.alert）**
//地方政府
常量[formData，setFormData]=useState({
姓名：“，
电邮：“，
密码：“”，
密码2:“”，
});
常量[errorsData，setErrorsData]=useState({
名称错误：“”，
电子邮件错误：“”，
密码错误：“”，
});
const{name，email，password2}=formData；
const{nameErr，emailErr，passwordErr}=errorsData；
//事件处理程序
const handleOnChange=e=>setFormData（{…formData[e.target.name]：e.target.value}）；
const handleOnSubmit=async e=>{
e、 预防默认值（）；
if（password！==password2）console.log（“密码不匹配”）；
else发送（registerUser（{name，email，password}））；
};
//影响
useffect（（）=>{
alerts.forEach（alert=>{
开关（alert.errField）{
案例“名称”：
setErrorsData（{…errorsData，nameErr:alert.msg}）；
打破
案例“电子邮件”：
setErrorsData（{…errorsData，EmailError:alert.msg}）；
打破
案例“密码”：
setErrorsData（{…errorsData，passwordErr:alert.msg}）；
打破
违约：
打破
};
});
}，[警报、错误数据]；
//渲染
返回(
名称
{nameErr}
电子邮件
{emailErr}
帕斯沃德
{passwordErr}
确认密码
);
};
**导出默认寄存器**

主要更改突出显示。
如果在功能组件内使用redux，为什么不直接使用
useSelector
钩子从
react-redux
在功能组件内导入
connect
从
react-redux
在组件内使用redux错误状态，不相容的；要么你的组件设置不正确，要么你没有显示正确的代码我不知道，因为我对react和redux都是新手。实际上，我修改了一个代码，其中警报显示在一个单独的组件中，但因为我想在每个字段下方而不是屏幕顶部显示错误，所以我决定在
Register
componen中使用
alerts