映射数组并返回 API 结果

Question

尝试使用简单的代码映射数组，并针对每个结果在 API 中搜索该结果并吐出从 API 检索到的数据。

import React from 'react';

const App = () => {

  let artistData = require('./mass-artists.json')

  artistData.map(

    (theArtist) => {

        fetch(`[url]https://api.scryfall.com/cards/search?q=a:[/url]"${theArtist}"`)

            .then((response) => {

              return response.json();

            })

            .then((myJson) => {

              console.log(JSON.stringify(myJson)); //returns the JSON data, so I know it's working

              console.log(myJson.data[0].name); //returns the first card name

            })

    }

  )

  return(<span>This is here so React doesn't yell at me about no return statement.</span>)

}

export default App;

JSON 文件只是 Magic 艺术家姓名的列表。该地图映射艺术家列表并在 API 上搜索他们。我想做我对地图所做的通常的事情，即在前端显示一些东西。但是我无法正常工作。我可以将内容记录到控制台或执行任何 Javascript 功能，例如设置某些内容的 innerHTML，但是我将在哪里/如何放置 return 语句以在例如 span 标签中显示结果？甚至如“你好！”。