反应&Redux - 页面加载时重置错误 [英] React & Redux - Resetting errors when a page loads

问题描述

我有一个用 React 构建的应用程序.有一个仪表板，上面有一个链接添加教育"，单击该链接时会加载一个带有表单的新页面.该表单有几个必填字段和一个提交按钮.当用户尝试提交表单时，如果未填写任何必需的输入，则会在每个遗漏的输入下方显示一条错误消息.

I have an app built with React. There is a dashboard with a link on it, Add Education, that when clicked loads a new page with a form. The form has several mandatory fields and a Submit button. When a user tries to submit the form, if any of the required inputs has not been filled, an error message shows under each input that was missed.

我的问题是，当页面导航离开状态错误时，错误仍然存​​在，并在返回页面时显示.我希望在离开页面时将错误重置为空对象 {}.

My problem is that when the page is navigated away from with errors in state, the errors persist and are shown when returning to the page. I'd like for the errors to be reset to empty object {} whenever the page is left.

我使用 Redux 和 React Router.相关代码如下(已缩短，.. 表示不相关)，如果有帮助，可以添加更多详细信息，谢谢.

I use Redux and React Router. The relevant code is below (shortened, .. indicates not relevant), can add further details if it will help, thanks.

在仪表板/ProfileActions.js 中

in dashboard/ProfileActions.js

  ..
  <Link to="/add-education" className="btn btn-light">
    <i className="fas fa-graduation-cap text-info mr-1" />
    Add Education
  </Link>
  ..

在 AddEducation.js 中

in AddEducation.js

function AddEducation(props) {
  const [eduState, setEduState] = useState({
    school: '',
    ..,
    errors: {},
  });

  useEffect(() => {
    setEduState({
      ...eduState,
      errors: props.errors,
    });
  }, [props.errors]);

  const onSubmit = (e) => {
    e.preventDefault();

    const eduData = {
      school: eduState.school,
      ..
    };

    props.addEducation(eduData, props.history);
  };

  const onChange = (e) => {
    setEduState({
      ...eduState,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <div className="add-education">
      ..
            <Link to="/dashboard" className="btn btn-light">
              Go Back
            </Link>
            ..
            <form onSubmit={onSubmit}>
              <TextFieldGroup
                placeholder="* School"
                name="school"
                value={eduState.school}
                onChange={onChange}
                error={eduState.errors.school}
              />
..

在 profileActions.js 中

in profileActions.js

export const addEducation = (eduData, history) => (dispatch) => {
  dispatch(clearErrors());
  axios
    .post('/api/profile/education', eduData)
    .then((res) => history.push('/dashboard'))
    .catch((err) => {
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data,
      });
    });
};
..
export const clearErrors = () => {
  return {
    type: CLEAR_ERRORS,
  };
};

在 errorReducer.js 中

in errorReducer.js

const initialState = {};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_ERRORS:
      return action.payload;
    case CLEAR_ERRORS:
      return {};
    default:
      return state;
  }
}

推荐答案

您可能正在寻找这样的东西

You might be looking for something like this

    useEffect(() => {
    // I'll run when the component is mounted
    // Setting the initial state for this component
    return () => {
      // all the clean-ups related to this component
      // I'll run when the component is unmounted
    }

  }, []);

您可以根据需要放置重置逻辑.

You can place your reset logic as required.

这篇关于反应&Redux - 页面加载时重置错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！