Question

我有一个处理登录表单的功能，确实发生了一些奇怪的事情。如果我一开始就正确输入了所有字段，那么一切都会正常，但是如果我触发一个错误，那么每次运行该函数时，即使在函数启动时将其设置为false，该错误也会始终为true。

const initialState = {
email: '',
password: '',
error: false,
success: false
};
const [state, setState] = useState(initialState);

const handleSubmit = e => {
e.preventDefault();
setState({ ...state, error: false, success: false });

props.form.validateFields(async (err, values) => {
  try {
    const { data, status } = await axios.post(vManager.path, values);

    if (data.token) {
      localStorage.setItem('token', data.token);
    }

    setState({ ...state, success: true });
  } catch (err) {
    setState({ ...state, error: true });
  }
});

};

Answer 1

您在state =>钩中缺少setState。

setState(state => ({ ...state, error: false, success: false }));

Reference

Answer 2

@Keno Clayton提出的解决方案起作用。然后我在React文档中找到了解释

state是在应用更改时对组件状态的引用。它不应该直接突变。相反，更改应通过根据状态和道具的输入来构建新对象来表示。例如，假设我们想通过props.step来增加state的值：

反应挂钩setState尝试捕获中可能的错误

2 个答案: