使用來自 API.graphql 調用的數據映射 ReactJS 列表

Question

我正在嘗試將包含來自 API 調用的數據的列表映射到 DynamoDB，我承認，我自學的 JavaScript 知識存在許多漏洞。

如何將在songs = () => {}創建的songList對象暴露給我返回的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>
    )
  }
}