我有一些随机数的JSON对象。最初,我得到一个空对象,但随后它会通过道具进行更新。
summary: {
numbers: {"123": 45,"678": 9,"101": 11},
other-stuff: "some other stuff"
}
我想渲染这样的数字,
123 => 45
678 => 9
101 => 11
不确定我在这里做错了什么
getNumbers() {
if (this.props.summary.numbers) {
return this.props.summary.numbers.map( (num, key) => {
return <p>{key} => {num}</p>;
});
} else {
return <p>data is not available</p>;
}
}
public render(): JSX.Element {
return (
<div>{this.getNumbers}</div>
);
}
答案 0 :(得分:3)
map
函数用于数组,但this.props.summary.numbers
是一个对象。考虑使用Object.keys
函数
getNumbers() {
if (this.props.summary.numbers) {
return Object.keys(this.props.summary.numbers).map( (key) => {
return <p>{key} => {this.props.summary.numbers[key]}</p>;
});
} else {
return <p>data is not available</p>;
}
}
您还需要调用getNumbers
函数
render
函数
<div>{this.getNumbers()}</div>
答案 1 :(得分:3)
getNumbers() {
if (this.props.summary.numbers) {
return Object.keys(this.props.summary.numbers).map( (key) => {
return <p>{key} => {this.props.summary.numbers[key]}</p>;
});
} else {
return <p>data is not available</p>;
}
}
public render(): JSX.Element {
return (
<div>{this.getNumbers()}</div>
);
}
你做错了2件事 a)你没有调用该函数。 b)您在对象上使用了地图。