反应将状态值传递给 var 不起作用

Question

>休息一段时间后，我一直在返回反应并尝试将我的状态复制到：

var {email, password } = this.state;

由于某种原因，我收到了错误：

引用错误： 密码未在 eval 定义 （在...

真的无法弄清楚我在简单的东西上有这样的错误。正在处理版本：

"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);

我应该如何处理这种错误？可能如何解决这个问题？

--编辑--在我下面的朋友帮助我之后，我明白问题是功能

    this.props.dispatch(login(data));

在数据获取状态值之前调用。如何强制它等到数据设置完毕？

Answer 1

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

 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)
}

Answer 2

在我看来，有

几件事可能会导致错误。

1. ComponentDidMount 应该使用 ComponentInstance.setState 方法

componentWillMount() {
  this.setState({ token: localStorage.getItem('token') })
}

2. onLogin 方法引用的是 props 而不是状态

   var { email, password } = this.props;
   

   应该是

   var { email, password } = this.state;
   

3. 与 redux 的连接似乎令人困惑，因为它将整个状态作为 logs 属性传递给组件

Answer 3

在onLogin函数中，您尝试从props而不是状态获取电子邮件和密码。