reactjs - reactjs - TypeError :arr Symbol iterator不是函数

如何解决此问题> TypeError : arr [Symbol.iterator] is not a function

我想实现基于令牌的登录操作

我的控制台也显示: the above error occurred in the component : in Login (created by ConnectFunction) in ConnectFunction (created by Context.Consumer) in Route (at Routing.js:24) in Routing (at App.js:13) in App (at src/index.js:14) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:13) in Provider (at 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);



Reducer


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';



时间:


const [formData, setFormData] = {


 email: '',


 password: ''


};



这就是问题所在,你试图将对象分解为数组元素。

我认为你在这里做错了,忘记添加useState了 ,替代: const [formData, setFormData] = { email: '', password: '' };应该 const [formData, setFormData] = useState({ email: '', password: '' });此外,不要忘记导入useState,import React, {useState} from react

你使用了错误的析构语法,另外,你没有使用useState


from import React, {useState} from react



useState将使用一个参数,这是该状态的默认值,


const [formData, setFormData] = useSatate({


 email: '',


 password: ''


});



...