Question

我从api中获取数据，JSON为：

{
    "food": [
        {
            "food": "Not Handle",
            "nb": 49
        },
        {
            "food": "Cooked",
            "nb": 1
        },
        {
            "food": "Raw",
            "nb": 1
        },
    ]
}

当组件didMount时，我的数据以我的状态存储，因此this.state.food包含我的JSON数据

我试图将其渲染如下：

render() {
    return (
        <Row>
            {this.state.food &&
                this.state.food.map((food) => {
                    return (
                        <div >
                            <Col sm={12} md className="mb-sm-2 mb-0">
                                <div className="text-muted">{food.food} :</div>
                                <strong> {food.nb}</strong>
                            </Col>
                        </div>)
                })}
        </Row>
    )
}

CompenentDidMount：（getCall是要获取的自定义函数）

async componentDidMount () {
const food = await getCall(
    `stats/event/count/food?eventRef=${this.props.eventRef}`,
    this.props.authToken,
    false
  );
  console.log('DATA', food); //  printed my data perfectly
  this.setState({ food: food});
}

我想我错过了一些事情，因为我无法在该对象上进行映射，我得到的map不是函数，我看到它只是一个数组？

预期结果非常简单，我想显示：

Not handle: 49
Cooked: 1
Raw: 1

Answer 1

尝试一下：

async componentDidMount () {
const data = await getCall(
    `stats/event/count/food?eventRef=${this.props.eventRef}`,
    this.props.authToken,
    false
  );
  console.log('DATA', data); //  printed my data perfectly
  this.setState({ food: data.food});
}

假设： await getCall()返回此确切数据：

{
    "food": [
        {
            "food": "Not Handle",
            "nb": 49
        },
        {
            "food": "Cooked",
            "nb": 1
        },
        {
            "food": "Raw",
            "nb": 1
        },
    ]
}

如果这正是getCall（）返回的内容，则由于变量名错误而使您感到困惑。数据实际上是一个地图，其中一个键作为食物，即数组。因此，在状态下，您实际上必须从具有地图功能的数据中获取食物钥匙的价值。

Answer 2

在您的api调用之后，将setState语句更改为this.setState({ food: food.food});

从api得到的响应是json。因此您尝试在map上使用json函数。 map函数只能与array一起使用。

如何通过API将地图函数与JSON对象提取结合使用

2 个答案: