React Hooks：映射函数内部的setState挂钩

Question

我目前正在与表单的setState进行异步处理，我的预期行为是，当用户单击SubmitForm按钮时，它将检查状态内的所有表单值（如果该值为空，然后为该特定值设置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完成后，它仅将errors对象内的最后一个值设置为true（因此errors.mobileNumber = true）。而不是使所有与条件匹配的值都为true。散布运算符{... errors}正在将这些值覆盖为初始false值。如果values数组中的值为空，无论如何，是否会实现将error内部的每个键都设置为true ??

请任何帮助将不胜感激

Answer 1

我将通过映射值的条目一次构造整个新错误对象，然后可以使用该对象调用setError：