在反应中设置自定义错误验证

Question

我正在尝试在 React 中创建一些自定义错误验证

我在状态中有一个值对象，在状态中有一个错误对象，它们共享相同的键

  const [values, setValues] = useState({
    name: "",
    age: "",
    city: ""
  });

  const [err, setErr] = useState({
    name: "",
    age: "",
    city: ""
  });

我有一个非常简单的句柄更改和一个 onSubmit，我想运行我的自定义验证器函数在里面

  const handleChange = (e) => {
    setValues({
      ...values,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    validateForms();
  };

在我的 validateForms 函数中，我的理论是因为我的两个状态共享相同的键我试图查看这些值中的任何一个 === '' 如果是匹配是错误对象中的相同键并设置相应的错误值，然后在 JSX

中做其他事情

  const validateForms = () => {
    for (const value in values) {
      if (values[value] === "") {
        setErr({
          ...err,
          value: `${value} is a required field`
        });
      }
    }
  };

我确实觉得我在这里没有正确使用 setErr。任何帮助都会很可爱。 link 到沙箱：https://codesandbox.io/s/trusting-bartik-6cbdb?file=/src/App.js:467-680

Answer 1

你有两个问题。首先，您的错误对象键需要是 [value] 而不是字符串 value。其次，您需要在您的状态 setter 中使用回调函数，这样您就不会传播旧版本的错误对象：

const validateForms = () => {
  for (const value in values) {
    if (values[value] === "") {
      setErr(err => ({
        ...err,
        [value]: `${value} is a required field`
      }));
    }
  }
};

设置错误的一种更直观的方法可能是累积所有错误并只设置一次错误状态：

const validateForms = () => {
  const errors = {};
  for (const value in values) {
    errors[value] = values[value] === "" ? `${value} is a required field` : "";
  }
  setErr(errors);
};

在反应中设置自定义错误验证

setting up custom error validation in react

forms

reactjs

use-state