Reactjs 将传递状态值反应为var不工作

Reactjs 将传递状态值反应为var不工作,reactjs,redux,state,Reactjs,Redux,State,我一直在休息后返回,并尝试将我的状态复制到: var {email, password } = this.state; 出于某种原因,我得到了错误: ReferenceError:评估时未定义密码评估时 我真的搞不懂我在一件简单的事情上犯了这样的错误。 正在编写版本: "react": "^16.7.0", 我的代码是: import React, { Component } from 'react'; import { connect } from "react-redux"; impor

我一直在休息后返回,并尝试将我的状态复制到:

var {email, password } = this.state;
出于某种原因,我得到了错误:

ReferenceError:评估时未定义密码评估时

我真的搞不懂我在一件简单的事情上犯了这样的错误。 正在编写版本:

"react": "^16.7.0",
我的代码是:

import React, { Component } from 'react';
import { connect } from "react-redux";
import { HashRouter, Route } from 'react-router-dom';
import { login } from '../actions/loginActions';

class Login extends Component {
  constructor (props) {
    super(props)
    this.state = {
      email: "",
      password: "",
      token: "",
      redirect: false

    };

    this.onLogin = this.onLogin.bind(this)
    this.onLogout = this.onLogout.bind(this)
  }
  handleUpdateEmail = (e) =>{
    console.log('handleUpdateEmail: '+e.target.value)
    this.setState({email: e.target.value});

  }
  handleUpdatePassword = (e) =>{
    console.log('handleUpdatePassword: '+e.target.value)
    this.setState({password: e.target.value});
  }
  componentWillMount() {
    this.state =  { token: localStorage.getItem('token') }
  }

  onLogin = () => {

    var { email, password } = this.state;
    let data = {
      'email': email,
      'password': password    
    }
    this.props.dispatch(login(data));
  }

  onLogout = state =>{
    localStorage.removeItem('token');
  }
  render() {
    const { redirect } = this.state;
    if (redirect) {
      return (
        <HashRouter>
        <Route path='/' component={() => window.location = '/'}/>
        </HashRouter>
      );
    }
    return (
      <div className="app flex-row align-items-center">
      <form onSubmit={this.onLogin} >
        <label>
        Username:
        <input type="text" placeholder="Username" onChange={this.handleUpdateEmail}/>

        </label>
        <label>
        Password:
        <input type="password" placeholder="Password" onChange={this.handleUpdatePassword} />

        </label>
        <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
const mapStateToProps = state => ({
    logs: state

  });
  export default connect(mapStateToProps)(Login);
在数据获取状态值之前调用。
如何强制它等待数据设置?

在onLogin函数中,您试图从道具而不是状态获取电子邮件和密码。

在onLogin函数中,您试图从道具而不是状态获取电子邮件和密码。

在我看来,有几件事可能会导致错误

ComponentDidMount应使用ComponentInstance.setState方法 组件将安装{ this.setState{token:localStorage.getItem'token}
} 在我看来,有几件事可能会导致错误

ComponentDidMount应使用ComponentInstance.setState方法 组件将安装{ this.setState{token:localStorage.getItem'token} } 不要使用现在不推荐使用的componentWillMount,您应该在构造函数中初始化整个状态,之后不应该重新分配状态,对于将来的更新,您应该使用this.setState

不要使用现在不推荐使用的componentWillMount,您应该在构造函数中初始化整个状态,之后不应该重新分配状态,对于将来的更新,您应该使用this.setState


其中是指令var{email,password}=this.state;在您的代码中?仅在函数中登录您的代码似乎是正确的。您确定错误来自onLogin函数吗?您有var{email,password}=this.props;而不是var{email,password}=this.state;我知道为什么我不能传递值:你能告诉我们登录操作方法吗?指令var{email,password}=this.state在哪里;在您的代码中?仅在函数中登录您的代码似乎是正确的。您确定错误来自onLogin函数吗?您有var{email,password}=this.props;而不是var{email,password}=this.state;我知道为什么我不能传递这个值:你能告诉我们登录操作方法吗?我已经把它改回this.state,在删除this.props.dispatchlogindata之后;我可以控制台数据信息,我已经将其更改回this.state,并在删除this.props.dispatchlogindata之后;我可以控制数据信息
    this.props.dispatch(login(data));
 constructor (props) {
   super(props)
   this.state = {
     email: "",
     password: "",
     redirect: false,
     token: localStorage.getItem('token')
   };

   this.onLogin = this.onLogin.bind(this)
   this.onLogout = this.onLogout.bind(this)
}