将元素推入对象
Pushing an element into an object
我是 React 的新手,但我很确定这个问题与 Javascript 的关系比与 React 的关系更大。我想将一个自定义元素推送到一个已经在 React 中创建的对象中,而不触发 forceUpdate()
.
我想将 fullName
推送到 person
对象。所以我可以像这样在 React 中访问它,this.state.person.fullName
而不是 this.state.fullName
.
现在我知道我可以做到:this.state.person.fullName = this.formatName(person.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'));
您可以使用 ES6 Spread Syntax 按照您的要求进行更改。
例子
this.setState((prevState) => ({
person: {
...prevState.person,
fullName: this.formatName(person.name)
}
}))
Update (我理解错了,这个跟问题比较相关)
let person = response.data.results[0];
person["fullName"] = this.formatName(person.name);
this.setState({
person: person
});
您可以使用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,
});
我是 React 的新手,但我很确定这个问题与 Javascript 的关系比与 React 的关系更大。我想将一个自定义元素推送到一个已经在 React 中创建的对象中,而不触发 forceUpdate()
.
我想将 fullName
推送到 person
对象。所以我可以像这样在 React 中访问它,this.state.person.fullName
而不是 this.state.fullName
.
现在我知道我可以做到:this.state.person.fullName = this.formatName(person.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'));
您可以使用 ES6 Spread Syntax 按照您的要求进行更改。
例子
this.setState((prevState) => ({
person: {
...prevState.person,
fullName: this.formatName(person.name)
}
}))
Update (我理解错了,这个跟问题比较相关)
let person = response.data.results[0];
person["fullName"] = this.formatName(person.name);
this.setState({
person: person
});
您可以使用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,
});