Отображение списка ReactJS с данными из вызова API.graphql

Question

Я пытаюсь отобразить список с данными из вызова API в DynamoDB, и я признаю, что в моих знаниях самообучения JavaScript много пробелов.

Как предоставить объект songList, созданный в songs = () => {}, моему возвращаемому songList.map?

Я пробовал вызов API вне объявления компонента, а также внутри и вне функция.

import React, { Component } from 'react';
import * as queries from '../graphql/queries';
import Song from './Song';

API.configure(awsconfig);

class SongList extends Component {
  render() {
    const songs = () => {
      API.graphql(graphqlOperation(queries.listSongs)).then(function (songData) {
        const songList = songData['data']['listSongs']['items'];
        return songList;
      });
    }

    console.log(songs()); // undefined

    return (
      <div>
        {
          songList.map((song, i) => <Song
            key={i}
            title={song['title']}
            author={song['author']}
            keywords={song['keywords']}
            instruments={song['instruments']}
            isrcCode={song['isrcCode']}
            lyrics={song['lyrics']}
          />)
        }
      </div>
    )
  }
}

export default SongList;

Answer 1

никогда НИКОГДА не делать запросы в методе рендеринга

componentDidMount(){
 const songs = () => {
      API.graphql(graphqlOperation(queries.listSongs)).then(function (songData) {
        const songList = songData['data']['listSongs']['items'];
        return songList;
      });
this.setState({list:sondgs()})

}



render() {
    let list = this.state.list || []

    return (
      <div>
        {
          list.map((song, i) => <Song
            key={i}
            title={song['title']}
            author={song['author']}
            keywords={song['keywords']}
            instruments={song['instruments']}
            isrcCode={song['isrcCode']}
            lyrics={song['lyrics']}
          />)
        }
      </div>
    )
  }
}