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输入元素...这意味着您无法同时更新用户名和密码的值，就像您尝试做的那样。您一次只能更新一个值。为了方便这一点，您需要添加一个名称＆＃34;输入元素的属性：

<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是一个异步函数。因此，您无法在下一行访问它，但我向您保证它正在运行。另外，如果你真的想从状态记录值，你可以将日志放在render方法中，或者使用setState回调，这是setState函数的第二个参数，如下所示：

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

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

3 个答案: