使用扩展运算符更改 React State Object

Question

我正在尝试在提交表单之前对其进行验证，并且我创建了一个可能出现错误的 object，但是当尝试更改每个键的值时，它的行为很奇怪......

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"
...

validateSubmit function 由提交按钮调用。

Answer 1

这里的答案是 useReducer() 只修改 state 的一部分。 https://reactjs.org/docs/hooks-reference.html#usereducer 。

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

const reducer = (_, { data }) => data;

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;
}

Answer 2

当您从validateSubmit多次调用setError时，就会出现问题。 只有最后一个值会获胜 - 在您的示例中，添加了"false": true （因为您用作属性名称的errors.message是false ）。

请注意， setError不会（同步或根本不）更新error常量，它只会更改组件 state 并导致它使用新值重新渲染。 {...errror, …}总是引用error的原始值。 为避免这种情况，您可以

• 在调用setError之前将错误聚合为单个值

  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; }

• 或使用setError的回调版本，它将连续执行更新，并始终在每个回调中传递最新的 state 作为参数：

   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; }