Сброс значений состояния после onSubmit, даже если он не был успешным

Question

У меня есть форма, и если я делаю отправку, и она возвращает ошибку, я запрограммировал ее, чтобы показать мне, где ошибки. После исправления только ошибок, и я отправляю его, происходит сбой, потому что состояния сбрасываются и пустые значения отправляются в API. Я покажу код ниже:

const AddProject = (props) => {
  const [values, setValues] = useState({
    projectName: '', projectIdentifier: '', description: '', startDate: '', endDate: '', errors: {},
  });

  useEffect(() => {
    if (props.errors) {
      setValues({ errors: props.errors });
    }
  }, [props.errors]);

  const onChange = (e) => {
    const { name, value } = e.target;
    console.log(values);
    setValues({ ...values, [name]: value });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const newProject = {
      projectName: values.projectName,
      projectIdentifier: values.projectIdentifier,
      description: values.description,
      startDate: values.startDate,
      endDate: values.endDate,
    };

    props.createProject(newProject);
  };

создать действие проекта ниже

const createProject = (project) => async dispatch => {
  try {
    await axios.post('http://localhost:8080/api/project', project);
    window.history.back();
  } catch (e) {
    dispatch({
      type: GET_ERRORS,
      payload: e.response.data
    });
  }
};

export default createProject;

Answer 1

useEffect(() => {
if (props.errors) {
  let temp = { ...values };
  temp.errors = props.errors;
  setValues(temp);
}
}, [props.errors]);

При использовании реагирующих хуков вам нужно получить предыдущее состояние и затем установить новые значения. Когда вы устанавливаете только props.errors, он удаляет все остальные значения ключей из вашего состояния.

Надеюсь, это поможет