React在第二次onChange后的更新状态

Question

我是React的新手，所以这可能是一个愚蠢的问题，但谁问不迷路呢。

因此，当我尝试输入sth时，在我输入两次之后，这个更新

。

//输入"a"键盘

什么都不写参见

//第二次输入"a"键盘

州只看一个字母a

下面是我的代码:

class Input extends React.Component {
constructor(props) {
super(props);
this.state = { login: '', pass: '' };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value,
});
this.info = this.state.login + ' ' + this.state.pass;
}
render () {
return (
<>
<input name="login"  value={ this.state.login } onChange={ this.handleChange.bind(this) } placeholder="LOGIN" type="text"></input>
<input name="pass"  value={ this.state.pass }  onChange={ this.handleChange.bind(this) } placeholder="PASSWORD" type="text"></input>
<h3> { this.info } </h3>
</>
);
}
}

Answer 1

State在react中的更新是异步的，这意味着如果你使用this.SetState({a:1})更新状态;如果您立即尝试使用此代码获取该值，则this.state。a，它可能更新也可能不更新，所以你不会得到最新的值，所以你应该避免它。你可以这样做

handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
let stateValue = this.state;
stateValue[name] = stateValue[name] + value;


this.setState({
[name]: value,
});
this.info = stateValue .login + ' ' + tstateValue .pass;
}

Answer 2

如果你把

<h3> { this.info } </h3>

<h3> { this.state.login + ' ' + this.state.pass } </h3>

你会看到它像你想要的那样工作。