Как использовать функцию карты с выборкой объекта JSON через API

Question

Я получаю данные из моего API, JSON:

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

Мои данные хранятся в моем состоянии, когда компонент didMount, так что this.state.food содержит мои данные JSON

Iпопытался отобразить это так:

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});
}

Я думаю, что что-то пропустил, потому что не могу отобразитьэтот объект, который я получаю, карта не является функцией, я видел, что это всего лишь массив?

ожидаемый результат действительно прост, я хочу отобразить:

Not handle: 49
Cooked: 1
Raw: 1

Answer 1

После вызова API измените выражение setState на this.setState({ food: food.food});

. В ответ на ваши API вы получаете json.поэтому вы пытаетесь использовать функцию map на json.Функция map может использоваться только с array.

Answer 2

Попробуйте:

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 (), то вы получаетеперепутан из-за неправильного имени переменной.Данные на самом деле карта с одним ключом в качестве пищи, которая является массивом.Таким образом, на самом деле вы должны получить значение ключа питания из данных, имеющих функцию карты.