获取未捕获的类型错误：undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Question

我正在尝试按照此处的 React 教程进行操作：https://www.bezkoder.com/react-hooks-jwt-auth/，并且在访问登录页面时遇到 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) 错误。

这是我的登录页面代码

import React, { useState, useRef } from "react";
import { useNavigate } from "react-router-dom";
import Form from "react-validation/build/form";
import Input from "react-validation/build/input";
import CheckButton from "react-validation/build/button";

import AuthService from "../service/auth.service";

const required = (value) => {
  if (!value) {
    return (
      <div className="alert alert-danger" role="alert">
        This field is required!
      </div>
    );
  }
};

const Login = () => {
  let navigate = useNavigate();

  const form = useRef();
  const checkBtn = useRef();

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");

  const onChangeUsername = (e) => {
    const username = e.target.value;
    setUsername(username);
  };

  const onChangePassword = (e) => {
    const password = e.target.value;
    setPassword(password);
  };

  const handleLogin = (e) => {
    e.preventDefault();

    setMessage("");
    setLoading(true);

    form.current.validateAll();

    if (checkBtn.current.context._errors.length === 0) {
      AuthService.login(username, password).then(
        () => {
          navigate("/profile");
          window.location.reload();
        },
        (error) => {
          const resMessage =
            (error.response &&
              error.response.data &&
              error.response.data.message) ||
            error.message ||
            error.toString();

          setLoading(false);
          setMessage(resMessage);
        }
      );
    } else {
      setLoading(false);
    }
  };

  return (
    <div className="col-md-12">
      <div className="card card-container">
        <img
          src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
          alt="profile-img"
          className="profile-img-card"
        />
        <Form onSubmit={handleLogin} ref={form}>
          <div className="form-group">
            <label htmlFor="username"> Username </label>{" "}
            <Input
              type="text"
              className="form-control"
              name="username"
              value={username}
              onChange={onChangeUsername}
              validations={[required]}
            />{" "}
          </div>
          <div className="form-group">
            <label htmlFor="password"> Password </label>{" "}
            <Input
              type="password"
              className="form-control"
              name="password"
              value={password}
              onChange={onChangePassword}
              validations={[required]}
            />{" "}
          </div>
          <div className="form-group">
            <button className="btn btn-primary btn-block" disabled={loading}>
              {" "}
              {loading && (
                <span className="spinner-border spinner-border-sm"> </span>
              )}{" "}
              <span> Login </span>{" "}
            </button>{" "}
          </div>
          {message && (
            <div className="form-group">
              <div className="alert alert-danger" role="alert">
                {" "}
                {message}{" "}
              </div>{" "}
            </div>
          )}{" "}
          <CheckButton style={{ display: "none" }} ref={checkBtn} />{" "}
        </Form>{" "}
      </div>{" "}
    </div>
  );
};

export default Login;

关于如何解决它的任何想法？谢谢。 enter image description here

Answer 1

你可以改变这部分 enter image description here

进入下面的代码：

只需将 [] 更改为 {}

const {username, setUsername} = useState("");
const {password, setPassword} = useState("");
const [loading, setLoading] = useState(false);
const {message, setMessage} = useState("");

希望它有效！