reactjs：更改值后未定义状态属性

Question

在输入中更改用户名和密码后，我的状态属性变为“未定义”。我就是想不通：由于某种原因 this.setState 似乎不起作用。

这是代码：

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as LogonStore from '../store/LogonStore';

type LogonProps =
    LogonStore.LogonState
    & typeof LogonStore.actionCreators
    & RouteComponentProps<{}>;

class Logon extends React.Component<any, any> {
    public constructor(props) {
        super(props);
        this.state = { un: '', pw: '' };
        this.handleChange = this.handleChange.bind(this);      
    }

    handleChange(event) {
        console.log(event.target.value); // works fine
        this.setState({ un: event.target.un, pw: event.target.pw });
        console.log(this.state); //first  un: '', pw: '' then un: undefined, pw: undefined
    }

    public render() {
        return <div >
            <h1>Logon</h1>
            <label>username</label><input value={this.state.un} onChange={this.handleChange} />
            <label>password</label><input value={this.state.pw} onChange={this.handleChange} />
            <br />         
        </div>;
    }
}


export default connect(
    (state: ApplicationState) => state.logon, // Selects which state properties are merged into the component's props
    LogonStore.actionCreators                 // Selects which action creators are merged into the component's props
)(Logon) as typeof Logon;

我在这里遗漏了一些基本的东西......

谢谢！

Answer 1

您一次只能处理一个输入的更改。问题代码如下：

this.setState({ un: event.target.un, pw: event.target.pw });

当您输入表单域时，您的handleChange 函数将被调用。 event.target 是您刚刚更改的内容的 HTML 输入元素……这意味着您无法像尝试那样同时更新用户名和密码的值。您一次只能更新一个值。为了促进这一点，您需要在输入元素中添加一个“名称”属性：

<input name="un" value={this.state.un} onChange={this.handleChange} />
<input name="pw" value={this.state.pw} onChange={this.handleChange} />

然后像这样更新你的状态：

this.setState({ [event.target.name]: event.target.value });

Answer 2

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      un:'',
      pw:''
    }
  }
  
  handleChange=(event)=> {
    this.setState({[event.target.name]: event.target.value}, 
    () => {
      //updated state
      console.log(this.state)
    });
  }

  render() {
    return <div>
      <h1> Logon </h1> 
      <label> username </label>
      <input name="un" value={this.state.un} onChange={this.handleChange}/>
      <br /> 
      <label> password </label>
      <input name="pw" value={this.state.pw} onChange={this.handleChange}/>
    </div>
  }
}
ReactDOM.render( <App/> , document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

OP 要求的解释：

setState 是异步的。 改变这些变化需要时间。因此，您可以按照答案所示记录或检查状态，而不是检查下一行的状态。 有关这方面的更多详细信息，请参阅 setState()

Answer 3

setState 是一个异步函数。因此，您无法在下一行访问它，但我向您保证它正在工作。另外，如果你真的想记录 state 中的值，你可以将 log 放在 render 方法中，或者使用 setState 回调，这是 setState 函数的第二个参数，如下所示：

this.setState(
  { un: event.target.value.un, pw: event.target.value.pw },
  () => console.log(this.state)
);