javascript - 对一个对象反应 setState 不正确

Question

我是 React 新手，我想在输入更改其值时更新对象的状态。

我已经搜索了一些与此相关的参考资料，并且有几种解决方案，例如this。但是，它对我来说不能正常工作。

应用此解决方案，我得到的值不正确。例如，我键入输入值：“name”，但我得到的值只有“nam”。最后一个字符丢失。

这里有什么问题？这里有人可以帮助我吗？提前谢谢你。

这是我的组件 AddHero.js 的代码

import React, { Component } from 'react';

class AddHero extends Component {

constructor(props) {
    super(props);

    this.state = {
        hero: {}
    };

    this.addHero = this.addHero.bind(this);
    this.nameChange = this.nameChange.bind(this);      
}

addHero() {

}

nameChange(event) {
    var temp = {...this.state.hero};
    temp.Name = event.target.value;   
    this.setState({hero:temp});

    console.log(this.state.hero.Name);//the value of Name is always missing the last character from the input
}   

render() {
    return (
        <div>
            <div className="name">
                <label>Name: </label>
                <input type="text" id="Name" onChange={this.nameChange} />
                {/* <p class="alert alert-danger invalid" >Invalid Name</p> */}
            </div>

            <div className="submit">
                <button type="button" onClick={this.addHero} >Add new</button>
            </div>
        </div>
    );
}
}

export default AddHero;

这是快照：

标签： javascriptreactjs

Answer 1

该setState方法不会立即更改组件的状态。但是，解决您的问题的一种方法是使用setState()方法的回调（在状态更改生效时调用该回调）。

考虑以下内容，它显示了在状态更改生效后如何记录组件的状态：

nameChange(event) {
    var temp = {...this.state.hero};
    temp.Name = event.target.value;   

    this.setState({hero:temp}, 
    () => { // Callback called when state change has been applied

       // Prints the latest state for hero.name
       console.log(this.state.hero.Name);
    });
}