使用擴展運算子更改React狀態物件-有解無憂

我正在嘗試在提交表單之前對其進行驗證，并且我創建了一個可能出現錯誤的物件，但是當嘗試更改每個鍵的值時，它的行為很奇怪......

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函式由提交按鈕呼叫。

使用擴展運算子更改 React 狀態物件

uj5u.com熱心網友回復：

這里的答案是 useReducer() 只修改部分狀態。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;
}

uj5u.com熱心網友回復：

當您setError從validateSubmit. 只有最后一個值會獲勝 - 在您的示例中，這是添加的那個"false": true（因為errors.message您用作屬性名稱是false）。

請注意，setError它不會（同步或根本不）更新error常量，它只會更改組件狀態并導致它使用新值重新渲染。{...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將連續執行更新，并始終將每個回呼中的最新狀態作為引數傳遞：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/416324.html

標籤：

上一篇：頁面加載時在React中加載組件不顯示

下一篇：如何安裝NPM依賴項？