javascript - 当我尝试显示对象属性或 console.log - React & Hooks 时，对象属性未定义

Question

我对反应有点陌生，我不明白为什么我的对象属性未定义但是当我 console.log 我的对象看起来不错时，请参阅此屏幕截图：

这是我的自定义钩子useForm：

const useForm = (callback, validateRegister) => {
  const [values, setValues] = useState({
    name: '',
    email: '',
    password: '',
    confirmPass: '',
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

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

  const handleSubmit = (event) => {
    event.preventDefault();
    setErrors(validateRegister(values)); // validateReister is another function that returns and object with these properties.
    setIsSubmitting(true);
  };

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
      callback();
    }
  }, [errors]);

  return {
    handleChange,
    handleSubmit,
    values,
    errors,
  };
};

export default useForm;

零件：

  const { handleChange, handleSubmit, values, errors } = useForm(
    submit,
    validateRegister
  ); 

问题：

{errors.nameError}

没有出现，也没有出现在 console.log 上。任何想法？

标签： javascriptreactjsreact-hooks

Answer 1

我认为你的validateRegister(values)回报是Promise. 尝试将您的实现更改为以下内容：-

const handleSubmit = (event) => {
    event.preventDefault();
    validateRegister(values).then(data => setErrors(data)).catch(err => console.log(err));
    setIsSubmitting(true);
  };