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

【问题标题】：setting up custom error validation in react在反应中设置自定义错误验证
【发布时间】：2021-11-20 03:45:08
【问题描述】：

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

我在 state 中有一个值 obj，在 state 中有一个错误 obj，它们共享相同的键

  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 函数中，我的理论是因为我的两个状态共享相同的键我试图查看这些值中的任何一个是否 === '' 如果是匹配是错误 obj 中的相同键并设置相应的给错误赋值，然后在 JSX 中做其他事情

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

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

【问题讨论】：

应该是[value]: ${value} 是必填字段``

标签： reactjs forms use-state

【解决方案1】：

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

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

【讨论】：