Javascript 对象的反应设置状态不正确

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

我搜索了一些与此相关的参考资料，有几种解决方案，如。然而，它对我来说并不正确

应用此解决方案时，我得到的值不正确。例如，我键入输入值：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;

以下是快照：

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);
    });
}  

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);
    });
}  

---

这很简单。运行console.logthis.state.hero.Name时；您的状态尚未更改，因为此.setState是异步调用。这意味着执行后发生的一切都还没有访问更新状态的权限。。。要修复此问题，请登录console.logtemp；因为它是一个对象，您将使用它来更新this.state.hero

或

---

在异步调用完成执行后，您可以使用setState的回调来访问您的状态。这里有一篇关于它的好文章

它非常简单。运行console.logthis.state.hero.Name时；您的状态尚未更改，因为此.setState是异步调用。这意味着执行后发生的一切都还没有访问更新状态的权限。。。要修复此问题，请登录console.logtemp；因为它是一个对象，您将使用它来更新this.state.hero

或

在异步调用完成执行后，您可以使用setState的回调来访问您的状态。下面是一篇关于它的好文章

如下：

 this.setState(currentState => ({ count: currentState.count + 1 }), () => {
    console.log(this.state.count);
});

就像这样：

 this.setState(currentState => ({ count: currentState.count + 1 }), () => {
    console.log(this.state.count);
});

---

每当需要基于以前的状态更新状态时，都必须使用updater参数

如果需要基于上一个状态设置状态，请阅读下面的updater参数。

基本上，它是用回调函数调用setState

this.setState((state) => ({ hero: { ...state.hero, Name: 'foo' } }))

---

每当需要基于以前的状态更新状态时，都必须使用updater参数

如果需要基于上一个状态设置状态，请阅读下面的updater参数。

基本上，它是用回调函数调用setState

this.setState((state) => ({ hero: { ...state.hero, Name: 'foo' } }))

---

setState是异步的，您不能在下一行中使用console.log并期望更改将console.log放入呈现并检查它是否工作，setState是异步的注意：在构造函数中，您可以只更改：nameChangeevent{to nameChange=event=>{@BrunoLM如果我删除构造函数中的.bind，当我调用函数nameChangeevent中的.state…时，这将是未定义的。setState的可能副本是异步的，您不能在下一行console.log并期望更改将console.log放入render并检查它是否工作，setState是异步的。注意：不要执行.bind在构造函数中，您可以只更改：nameChangeevent{to nameChange=event=>{@BrunoLM，如果我在构造函数中删除.bind，当我调用此.state…在函数nameChangeevent中，这将是未定义的。可能重复的@anhtv13 load I can help:-@anhtv13 load I can help:-