React Hooks：map function 內的 setState 鈎子

Question

我目前正在與表單的 setState 的異步性質搏斗，我的預期行為是，當用戶單擊 submitForm 按鈕時，它會檢查 state 中的所有表單值，如果該值為空，則它會為該特定表單元素設置 errorState以便出現錯誤消息

  const [values, setValues] = React.useState({
    firstName: '',
    lastName: '',
    id: '',
    city: '',
    emailAddress:'',
    mobileNumber: ''
  });

  const [errors, setError] = React.useState({
    firstName: false,
    lastName: false,
    id: false,
    city: false,
    emailAddress: false,
    mobileNumber: false
  })

  const submitForm = () => {
    const setErrorArray = Object.keys(values).map((key) => {
      if (values[key] === '') {
        setError({...errors, [key]: true })
      }
    });
  }

我相信這個問題是由於 setState 是異步的，所以在完成.map 之后，它只將錯誤 object 中的最后一個值設置為 true（因此 errors.mobileNumber = true）。 而不是使所有符合條件的值都為真。 擴展運算符 {...errors} 將值覆蓋為初始 false 值。如果 values 數組中的值為空，是否可以將錯誤中的每個鍵設置為 true？

請任何幫助將不勝感激

Answer 1

我將通過映射值的條目立即構造全新的錯誤 object，然后您可以使用該 object 調用setError ：

 const values = { firstName: 'first', lastName: 'last', id: '', city: '', }; const newErrors = Object.fromEntries( Object.entries(values).map( ([key, val]) => [key, val === ''] ) ); console.log(newErrors); // setError(newErrors);