Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))答案

【问题标题】：Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
【发布时间】：2022-01-05 03:17:22
【问题描述】：

我不确定为什么会收到此错误。我是新手，我创建了这个简单的表单，但它在渲染时出错。这是四字段输入表单，我在每个输入的 onChange 上使用 HANDLECHANGE 函数并根据它们的名称获取所有值，使用 handleSubmit 函数来避免表单的正常行为。 handleSubmit 不是问题因素，但我仍然尝试删除它，但代码仍然不起作用。如果我在做一些愚蠢的事情，请告诉我。这是我的代码文件。

import React from "react";
import useForm from "./useForm";

function FormSignup() {
  const [values, handleChange, handleSubmit] = useForm();

  return (
    <div className="formContent">
      <form className="form" onSubmit={handleSubmit}>
        <h1>Get Started with us today!</h1>
        <div className="formElements">
          <label htmlFor="username" className="formLabel">
            Username
          </label>
          <input
            type="text"
            name="username"
            className="Inputs"
            onChange={handleChange}
            value={values.username}
            placeholder="Enter your username"
          />
          <label htmlFor="email" className="formLabel">
            Email
          </label>
          <input
            type="email"
            name="email"
            className="Inputs"
            onChange={handleChange}
            value={values.email}
            placeholder="Enter your email"
          />
          <label htmlFor="password" className="formLabel">
            Password
          </label>
          <input
            type="password"
            name="password"
            className="Inputs"
            onChange={handleChange}
            value={values.password}
            placeholder="Enter your password"
          />
          <label htmlFor="password2" className="formLabel">
            Confirm Password
          </label>
          <input
            type="password"
            name="password2"
            className="Inputs"
            onChange={handleChange}
            value={values.password2}
            placeholder="Confirm your password"
          />
          <button className="formButton" type="submit">
            SignUp
          </button>
        </div>
      </form>
    </div>
  );
}

export default FormSignup;

在我的 useform 文件中，我使用状态挂钩处理表单输入。想知道我是不是在这里做错了什么。

import { useState } from "react";

const useForm = () => {
  const [values, setValues] = useState({
    username: "",
    email: "",
    password: "",
    password2: "",
  });

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

export default useForm;

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

您从 useForm 钩子返回一个对象，但像数组一样解构它。我想如果你改变

const [值，handleChange，handleSubmit] = useForm();

到

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

您的代码应该可以工作。

【讨论】：

谢谢你的工作。