Javascript 将元素推入对象

我对React还不熟悉，但我很确定这个问题与Javascript的关系比React更密切。我想在不触发forceUpdate的情况下，将自定义元素推送到React中已经生成的对象中

我想将fullName推送到person对象。所以我可以像这样在React中访问它，this.state.person.fullName，而不是this.state.fullName

现在我知道我可以做：this.state.person.fullName=this.formatNameperson.name

但这需要forceUpdate来触发重新渲染，我认为这不是推荐的方式

class Person extends React.Component {
    constructor(props) {
        super(props);
        this.url = "https://randomuser.me/api";
        this.state = {
            person: {
                fullName: '',
            },

        };

        this.generate = this.generate.bind(this);
    }

    formatName(name) {
        // Mr.Jon Snow
        return `${name.title}.${name.first} ${name.last}`;
    }
    generate() {
        axios.get(this.url).then(response => {
            var person = response.data.results[0];
            this.setState({
                person: person,
                fullName: this.formatName(person.name)
            });
        });
    }
    render() {
        return (
            <div>
                <button onClick={this.generate}>Generate</button>
                <div className="card">
                    <h3>The person's information</h3>
                    <div className="person-name">Name: {this.state.fullName}</div>
                    <div className="person-dob">Date of Birth: {this.state.person.dob}</div>
                    <div className="person-email">Email: {this.state.person.email}</div>
                    <div className="person-phone">Phone Number: {this.state.person.phone}</div>
                </div>
            </div>
        )
    }
}

ReactDOM.render(<Person />, document.getElementById('app'));

您可以使用按要求进行更改

范例

我误解了这个问题。这与问题更相关

您可以使用按要求进行更改

范例

我误解了这个问题。这与问题更相关

您可以使用Object.assign方法来实现您的需求

var person = response.data.results[0];
Object.assign(person,{"fullName": this.formatName(person.name)};
this.state = {
     person: person
};

您可以使用Object.assign方法来实现您的需求

var person = response.data.results[0];
Object.assign(person,{"fullName": this.formatName(person.name)};
this.state = {
     person: person
};

---

现在person对象的属性为空，但显示全名。。。可能是因为我没有使用编译器吗？@Akar我更新了答案。我想我一开始就把你的问题搞错了。请尝试看看第二个示例是否有用。您和Prateep都解决了问题，但他的解决方案是我喜欢的，尽管如此，我还是对两个答案都投了赞成票，谢谢您花时间。@akar，如果您使用ES6，您可以像我的答案一样使用Object.assign方法。为了写一个清晰的解决方案。现在person对象的属性为空，但显示全名。。。可能是因为我没有使用编译器吗？@Akar我更新了答案。我想我一开始就把你的问题搞错了。请尝试看看第二个示例是否有用。您和Prateep都解决了问题，但他的解决方案是我喜欢的，尽管如此，我还是对两个答案都投了赞成票，谢谢您花时间。@akar，如果您使用ES6，您可以像我的答案一样使用Object.assign方法。为了写清楚答案。

var person = response.data.results[0];
Object.assign(person,{"fullName": this.formatName(person.name)};
this.state = {
     person: person
};

var person = response.data.results[0];
person.fullName = this.formatName(person.name);
this.setState({
    person: person,
});