Question

我有一些随机数的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>
    );
}

Answer 1

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>

Answer 2

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）您在对象上使用了地图。

如何在React中呈现JSON

2 个答案: