Reactjs API-запрос проблема

Question

Я пытаюсь получить некоторые данные из GameSpot API и отобразить их. Я вижу данные в консоли, но не вижу их на своей веб-странице.

import React, { Component } from 'react';
import axios from 'axios';


class Games extends Component {
    constructor(){
        super();
        this.state={
          games: [],
        }
    }

    componentDidMount() {
        axios.get(`http://www.gamespot.com/api/games/?api_key=[APIKEY]&format=json&filter=name:Cyberpunk 2077,limit:10`)          
            .then(res => {
                this.setState({
                    games: res.data
                })
            })
            .catch(error=>{
                console.log(error);
            })


    }
    render() {
        const {games} = this.state;
        console.log(games);

        return (
            <div>
              <p>{games.name}</p>
            </div>

        );
    }
}

Я ожидаю увидетьприведенные данные на моей веб-странице

Редактировать: console.log дает:

Answer 1

Вы неправильно отображаете свои элементы.

Попробуйте это внутри render Функция:

const {results} = this.state.games;
let names =[];
if(results && results.length) {
  results.forEach(result=> {
    names.push(<p>{result.name}</p>);
  });
}
return (
  <div>
    {names}
  </div>
);

Редактировать: мне пришлось справиться с ситуацией, когда состояние является нулевым.

Надеюсь, это поможет. Ура !!

Answer 2

Вам нужно перебрать объект как,

Object.keys(games.name).forEach(function(key) {
    <p>{games.name[key]}</p>
});