如何使用map函数通过API获取JSON对象

我从api获取数据，JSON是：

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

当组件挂载时，我的数据存储在我的状态中，因此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>
    )
}

我想我错过了一些东西，因为我不能在这个对象上映射，我得到的映射不是一个函数，我看到它只是一个数组

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

Not handle: 49
Cooked: 1
Raw: 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});
}

假设：

wait getCall（）

返回准确的数据：

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

---

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

在api调用后，将

setState

语句更改为

this.setState（{food:food.food}）

从api得到的响应是json。因此，您试图在
json
上使用
map
函数<代码>映射

功能只能与

数组

一起使用

您的代码似乎是正确的，您确定已提取数据吗？“不能映射”是什么意思？你能展示一下

componentDidMount

方法吗？是的，很抱歉我没有提到，我得到的map不是一个函数，我肯定我得到了我的数据，我用console.log打印了它，我还添加了我的componentDidMount。谢谢你的精确性，因为我试图映射到json而不是数组上，下次我会更加关注它！

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