在 React Native 中更新多个状态

Question

我正在尝试跟踪多个状态（在这种情况下是错误处理），但由于现阶段未知的原因（我认为缺乏理解）我似乎只能保持最后一个错误函数调用的状态:

export const SignUp = () => {
  const [errors, setErrors] = useState({});
  
  const validateFirstName = () => {
    if (formData.firstName === undefined) {
      setErrors(prevState => ({
        ...prevState.firstName,
        firstName: 'First Name is required',
      }));
      return false;
    } else if (formData.firstName.length < 3) {
      setErrors(prevState => ({
        ...prevState.firstName,
        firstName: 'First Name is too short',
      }));
      return false;
    }
    return true;
  };

  const validateLastName = () => {
    if (formData.lastName === undefined) {
      setErrors(prevState => ({
        ...prevState.lastName,
        lastName: 'Last Name is required',
      }));
      return false;
    } else if (formData.lastName.length < 1) {
      setErrors(prevState => ({
        ...prevState.lastName,
        lastName: 'Last Name is too short',
      }));
      return false;
    }
    return true;
  };

  const formSubmitHandler = e => {
    e.preventDefault();
    validateFirstName();
    validateLastName();
  };
}

所以在我的formSubmitHandler中我依次调用每个方法。这是错误的吗？例如，他们需要 async 吗？还是问题出在我的 setError 函数中？我没有正确设置更新状态吗？

当我注销时 errors 我只看到 lastName:

{"errors": {"lastName": "Last Name is required"}}

我该如何解决这个问题？

Answer 1

将函数按与表单相同的顺序放置，因此在转到下一个函数之前先检查每个函数。

Answer 2

反应中的状态变化是异步的，所以：

validateFirstName();
validateLastName();

你在哪里更新状态错误会导致不可预知的结果。在反应中进行表单验证的选项很少，为了保持基本的东西，我会从以下开始： https://reactjs.org/docs/hooks-reference.html#usereducer

Answer 3

这是你的问题所在：

  {
    ...prevState.lastName,
    lastName: 'Last Name is too short',
  }

您只是将 lastName（或另一个函数中的 firstName）传递给您的新状态，因此它不再具有其他值。

就这样：

  {
    ...prevState,
    lastName: 'Last Name is too short',
  }

对于所有这些，您现在应该在错误状态中拥有所有值

Answer 4

执行此操作的不同方法。您也可以批量处理来自验证器的响应并一次性设置状态。这也将减少您的应用程序的重新渲染。

工作示例：https://snack.expo.dev/@tnr_c/funny-raspberries

在 React Native 中更新多个状态

Updating multiple states in React Native

state

react-native

react-hooks