I'm trying to validate a form before submting it,and I created an object of possible errors, but when try to change the value of each key it behaves weirdly...

const inialState = {
  name: "",
  email: "",
  message: "",
};
const errors = {
  name: false,
  email: false,
  message: false,
};
const Contact = () => {
  const [values, setValues] = useState(inialState);
  const [error, setError] = useState(errors);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!validateSubmit()) {
      return;
    }
  };
  const handleChange = (e) =>
    setValues({ ...values, [e.target.name]: e.target.value });

  function validateSubmit(e) {
    let response = true;
    if (!values.name) {
      setError({ ...error, name: true });
      response = false;
    }
    if (!values.email) {
      setError({ ...error, email: true });
      response = false;
    }
    if (!values.message) {
      setError({ ...error, [errors.message]: true });// I also tried this way =(
      response = false;
    }
    console.log(error);
    return response;
  }
...
return(
    <form onSubmit={handleSubmit}> //its a simple button type="submit"
...

The validateSubmit function is called by the Submit button.

CodePudding user response：

The answer here is useReducer() to modify only portions of the state. https://reactjs.org/docs/hooks-reference.html#usereducer.

const errors = {
     name: false,
     email: false,
     message: false,
};

const reducer = (state, action) => {
    return {...state, ...action};
};

const [error, updateError] = useReducer(reducer,
    errors
);

function validateSubmit(e) {
    let response = true;
    if (!values.name) {
      updateError({name: true });
      response = false;
    }
    if (!values.email) {
      updateError({email: true });
      response = false;
    }
    if (!values.message) {
      updateError({message: true });
      response = false;
    }
    return response;
}

CodePudding user response：

The problem occurs when you call setError multiple times from validateSubmit. Only the last value will win - in your example that's the one that added "false": true (because errors.message that you used as a property name is false).

Notice that setError does not (synchronously, or at all) update the error constant, it only changes the component state and causes it to re-render with a new value. The {...errror, …} always did refer to the original value of error. To avoid this, you can

• either aggregate the errors into a single value before calling setError once

  function validateSubmit(e) {
    let newError = error;
    if (!values.name) {
      newError = { ...newError, name: true };
    }
    if (!values.email) {
      newError = { ...newError, email: true };
    }
    if (!values.message) {
      newError = { ...newError, message: true };
    }
    console.log(error, newError);
    setError(newError);
    return newError != error;
  }
  

• or use the callback version of setError that will execute the updates in a row and always pass the latest state in each callback as an argument:

  function validateSubmit(e) {
    let response = true;
    if (!values.name) {
      setError(oldError => ({ ...oldError, name: true }));
      response = false;
    }
    if (!values.email) {
      setError(oldError => ({ ...oldError, email: true }));
      response = false;
    }
    if (!values.message) {
      setError(oldError => ({ ...oldError, message: true }));
      response = false;
    }
    console.log(error);
    return response;
  }