javascript - 即使未成功，状态值也会在 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]);

使用react hooks时，需要获取之前的状态，然后设置新的值。当您仅设置 props.errors 时，它会从您的状态中删除所有其他键值。

希望这有帮助