未捕獲的型別錯誤：物件不可迭代（無法讀取屬性Symbol(Symbol.iterator)）-有解無憂

我不確定為什么會收到此錯誤。我是新來的，我創建了這個簡單的表單，但它在渲染時出錯。這是四個欄位輸入表單，我在每個輸入的 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;

uj5u.com熱心網友回復：

您正在從useForm鉤子中回傳一個物件，但將其解構為一個陣列。我想如果你改變

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

到

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

你的代碼應該可以作業。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/403744.html

標籤：

上一篇：從另一個功能組件訪問一個功能組件狀態

下一篇：另一個......函式作為一個React子節點是無效的