Javascript 此.state.value未定义，尽管已设置

我是新手。我从react文档（）中获取了示例代码，并对其进行了非常轻微的修改，以创建以下类：

class LoginView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {email: '',
                  password: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    alert(this.state.email);
    this.setState({email: event.target.email});
    this.setState({password: event.target.password});
  }

  handleSubmit(event) {
    alert(this.state.email);
    var response = fetch('http://0.0.0.0:5000/v1/authtoken/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*'
        },
        body: JSON.stringify({
          email: this.state.email,
          password: this.state.password,
        })
      }).then((response) => response.json())
    var token = response.token
    alert([token])
    event.preventDefault();
  }

  render() {
    return (
      <div className="login-form">
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label htmlFor="email">Email address:</label>
            <input type="email" className="form-control" id="email" value={this.state.email} onChange={this.handleChange}/>
          </div>
          <div className="form-group">
            <label htmlFor="pwd">Password:</label>
            <input type="password" className="form-control" id="pwd" value={this.state.password} onChange={this.handleChange}/>
          </div>
          <div className="checkbox">
            <label><input type="checkbox"/> Remember me</label>
          </div>
          <button type="submit" className="btn btn-default">Submit</button>
        </form>
      </div>
    );
  }
}

export default LoginView

classloginView扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={电子邮件：“”，
密码：'}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
警报（this.state.email）；
this.setState（{email:event.target.email}）；
this.setState（{password:event.target.password}）；
}
handleSubmit（事件）{
警报（this.state.email）；
var response=fetch（'http://0.0.0.0:5000/v1/authtoken/', {
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
“访问控制允许来源”：“*”
},
正文：JSON.stringify({
电子邮件：this.state.email，
密码：this.state.password，
})
}).then（（response）=>response.json（））
var token=response.token
警报（[令牌]）
event.preventDefault（）；
}
render（）{
返回(
电邮地址：
密码：
记得我吗
提交
);
}
}
导出默认登录视图

该类的目的是提供一个登录表单，该表单将向端点发布电子邮件和密码字段的值。我正在对

this.state

对象的行为方式进行研究

请注意，

handleSubmit

和

handlechange

中都有警报。这些警报应包含电子邮件字段的值，但它们包含值

undefined

。让我困惑的是，字段本身，也表示来自

this.state.email

的值，实际上可以工作。这意味着状态以某种方式被保存，但它在函数中不可用

我已经滔滔不绝地讲了几个小时，我不知道我怎么会有这种行为。非常感谢您的帮助。

在handleChange（）中，

event.target.email

和

event.target.password

无效

event

是正在更改的特定字段的onChange事件

event.target

返回DOMEventTarget（），它是对调度事件的对象的引用

因此，在您的例子中，

event.target

是触发onChange的输入字段

您需要将此更新为：

// If you use ES6 you can do this to use `event.target.type` as a key
handleChange(event) {
  this.setState({
    [event.target.type]: event.target.value
  });
}
// Otherwise, you can do it like this
handleChange(event) {
  var newState = {};
  newState[event.target.type] = event.target.value;
  this.setState(newState);
}

event.target.type

将返回

类型，对于您的情况，该类型为“电子邮件”或“密码”。而

event.target.value

将返回要更新的值

---

附加说明：调用.setState（nextState）将执行将nextState浅合并到当前状态的操作。因此，您不需要在handleChange函数中同时更新电子邮件和密码

这不是您现在报告的问题，但您正在尝试访问

response.token

，在

handleSubmit

中完成异步

fetch

之前，我尝试用您的建议替换handleChange，但似乎没有帮助。你建议的语法让我很困惑，尽管这可能是因为我不熟悉react。您的语法不创建一个键/值对，其中键是一个包含单个元素的数组吗？我不明白这将如何修改this.state.email或this.state.password？另外，我不知道你说的

是什么意思，同样的话也适用于handleSubmit

。我不在

handleSubmit

中调用事件。如果您使用ES6，则可以使用该语法。我对答案进行了编辑，为备选方法添加了有关setState（）工作原理的其他信息。