[英]Mapping ReactJS list with data from an API.graphql call
I'm trying to map a list with data from an API call to a DynamoDB and I admit, there are many holes in my self-taught JavaScript knowledge.我正在尝试将包含来自 API 调用的数据的列表映射到 DynamoDB,我承认,我自学的 JavaScript 知识存在许多漏洞。
How do I expose the songList
object created in songs = () => {}
to my return songList.map?如何将在
songs = () => {}
创建的songList
对象暴露给我返回的songList.map?
I've tried with API call outside the component declaration, and in and outside a function.我已经尝试在组件声明之外以及函数内外使用 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;
never NEVER do reqests in render method永远不要在渲染方法中做请求
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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.