使用来自 API.graphql 调用的数据映射 ReactJS 列表答案

【问题标题】：Mapping ReactJS list with data from an API.graphql call使用来自 API.graphql 调用的数据映射 ReactJS 列表
【发布时间】：2020-06-03 07:18:34
【问题描述】：

我正在尝试将来自 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;

【问题讨论】：

标签： reactjs api async-await amazon-dynamodb react-component

【解决方案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>
    )
  }
}

【讨论】：