使用setState为reactJS中的对象设置单个属性[重复]答案

【问题标题】：setting a single property using setState for an object in reactJS [duplicate]使用setState为reactJS中的对象设置单个属性[重复]
【发布时间】：2018-08-21 06:15:00
【问题描述】：

我正在尝试使用 setState 更新我的对象人员的属性“名称”。但这似乎不起作用。我通过用户输入获得了“新名称”。

我在这里错过了什么？

this.setState({ person: { name: newName } });

【问题讨论】：

你能分享一下this.state的样子吗？
更多上下文会很有帮助，例如组件的完整来源。至少，你的状态的形状和这个setState正在完成的功能。我怀疑setState如何只合并到对象键的顶层是一个问题
通过这种方式，person对象将丢失所有其他键，更新后只有名称将是他们的，检查这个答案：updating an object with setState
this.setState(state => ({ person: Object.assign({}, state.person, { name: newName }) }));
请在提出新问题之前使用搜索。

标签： javascript reactjs object setstate

【解决方案1】：

class TestJS extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            person : {name : "DefaultName", age : 56}
        }
    }

    componentDidMount(){
        this.setState(state => ({ person: Object.assign({}, state.person, { name: "sdsds" }) }));
    }

    render() {
        return(
            <div id="root">
                {this.state.person.name}
                {this.state.person.age}
                <p>Hello world</p>
            </div>

        );
    }
}

export default TestJS;

【讨论】：

如果我使用它会有任何性能问题 - this.setState(prevState => ({ person: { ...prevState.person, name: newName } }));