类型错误：arr[Symbol.iterator] 不是函数

Question

您好，我是 React 的初学者，我有一个 React 项目。我该如何解决这个问题 => TypeError: arr[Symbol.iterator] is not a function

我想实现一个基于令牌的登录动作

我的控制台也这样说：组件中发生了上述错误： 在登录（由 ConnectFunction 创建） 在 ConnectFunction 中（由 Context.Consumer 创建） 在路线中（在 Routing.js:24） 在路由中（在 App.js:13） 在应用程序中（在 src/index.js:14） 在路由器中（由 BrowserRouter 创建） 在 BrowserRouter (在 src/index.js:13) 在提供者中（在 src/index.js:12）

action.js

import axios from 'axios';
import {
  REGISTER_SUCCESS,
  REGISTER_FAILED,
  LOGIN_SUCCESS,
  LOGIN_FAILED
} from './types';

const LoginAction = (email, password) => async dispatch => {
  const config = {
    headers: {
      'Content-type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    }
  };

  const body = JSON.stringify({ email, password });

  try {
    const res = await axios.post('sample api', body, 
config);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data
    });
    console.log(res);
  } catch (err) {
    dispatch({
      type: LOGIN_FAILED
    });
  }
};

登录组件：

import React from 'react';
import './Login.css';
import {
  Container,
  Col,
  Card,
  Row,
  Form,
  InputGroup,
  Button
} from 'react-bootstrap';
import logo from '../../assets/image/logo&Text.png';
import bitcoinVector from '../../assets/image/bitcoinVector.png';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faUnlock } from '@fortawesome/free-solid-svg-icons';
import { cpus } from 'os';
import { Link } from 'react-router-dom';
import ThemeInput from '../../components/ThemeInput/ThemeInput';
import { connect } from 'react-redux';
import { LoginAction } from '../../actions/auth';
import Register from '../../screens/Register/Register';

const Login = ({ login }) => {
  const [formData, setFormData] = {
    email: '',
    password: ''
  };
  const emailRegex = RegExp(
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  );
  const { email, password } = formData;

  const handleSubmit = async event => {
    event.preventDefault();
    if (password.length > 0) {
      login(email, password);
    }
  };

  const handleChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  return (
    <div id="loginContainer">
      <Container className="h-100">
        <Row className="h-100">
          <Col xs={12} className="align-self-center">
            <Card id="loginCard">
              <img src={logo} id="logoImg" />
              <Card.Body className="p-0">
                <Row>
                  <Col md={6} id="imgBox">
                    <img src={bitcoinVector} id="bitconVector" />
                  </Col>
                  <Col md={6} id="formBox" className="align-self-center">
                    <h1>
                      Login to <span className="themeColor">Zillqa</span>
                    </h1>
                    <Row>
                      <Col xs={9}>
                        <p className="textGray">
                          Welcome Back, Please login to your account.
                        </p>
                      </Col>
                      <Col xs={10}>
                        <Form onSubmit={e => handleSubmit(e)}>
                          <ThemeInput
                            type="email"
                            placeholder="Email"
                            icon="user"
                            onChange={e => handleChange(e)}
                          />
                          <ThemeInput
                            type="password"
                            placeholder="Password"
                            icon="lock"
                            onChange={e => handleChange(e)}
                          />

                          <Form.Check label="Remember me" id="checkbox" />
                          <Row id="loginBoxFooter">
                            <Col xs={8}>
                              <span className="textGray">
                                Do you have any account?
                              </span>
                              <Link
                                to={Register}
                                className="themeColor textGray"
                              >
                                &nbsp;register
                              </Link>
                            </Col>
                            <Col xs="auto">
                              <Button className="themeBtn px-4">Login</Button>
                            </Col>
                          </Row>
                        </Form>
                      </Col>
                    </Row>
                  </Col>
                </Row>
              </Card.Body>
            </Card>
          </Col>
        </Row>
      </Container>
    </div>
  );
};

export default connect(
  null,
  { login: LoginAction }
)(Login);

减速机：

import {
  REGISTER_SUCCESS,
  REGISTER_FAILED,
  LOGIN_SUCCESS,
  LOGIN_FAILED
} from '../actions/types';

const initialState = {
  token: localStorage.getItem('token'),
  isAuthenticated: null,
  loading: true,
  user: null
};

const AuthReducers = (state = initialState, action) => {
  const { type, payload } = action;
  switch (type) {
    case LOGIN_SUCCESS:
    case REGISTER_SUCCESS:
      localStorage.setItem('token', payload.token);
      return {
        ...state,
        ...payload,
        isAuthenticated: true,
        loading: false
      };
    case LOGIN_FAILED:
    case REGISTER_FAILED:
      localStorage.removeItem('token');
      return {
        ...state,
        token: null,
        isAuthenticated: false,
        loading: false
      };
    default:
      return state;
  }
};

export default AuthReducers;

类型：

export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
export const REGISTER_FAILED = 'REGISTER_FAILED';
export const SET_ALERT = 'SET_ALERTS';
export const REMOVE_ALERT = 'REMOVE_ALERTS';
export const USER_LOADED = 'USER_LOADED';
export const AUTH_ERROR = 'AUTH_ERROR';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILED = 'LOGIN_FAILED';

Answer 1

const [formData, setFormData] = {
    email: '',
    password: ''
};

这就是问题所在。您正在尝试将对象解构为数组元素。

Answer 2

这里我认为你犯了一个错误，你忘了添加 useState。 而不是：const [formData, setFormData] = { email: '', password: '' }; 你应该有： const [formData, setFormData] = useState({ email: '', password: '' });.另外别忘了导入useState，import React, {useState} from react

Answer 3

您使用了错误的解构语法。另外，您没有使用useState。从反应中导入它。

from import React, {useState} from react

useState 将采用一个参数，即状态的默认值。在您的情况下，对象带有电子邮件和密码。

const [formData, setFormData] = useSatate({
    email: '',
    password: ''
});