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

Question

I have a function to handle the submission of a login form and something really strange is happening. If I enter all the field correctly at the first try everything works fine but if I trigger an error then every time that I run the function error will always be true even setting it as false in the start of the function.

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

You were missing a state => inside the setState hook.

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

Reference

Answer 2

The solution presented by @Keno Clayton works. And then I found the explanation on React documentation

state is a reference to the component state at the time the change is being applied. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from state and props. For instance, suppose we wanted to increment a value in state by props.step: