时间戳

首页 > 解决方案 > 映射数组并返回 API 结果

javascript - 映射数组并返回 API 结果

问题描述

尝试一个简单的代码来映​​射一个数组，并为每个结果在 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 文件只是魔术艺术家姓名的列表。该地图映射了艺术家列表并在 API 上搜索他们。我想做与地图一样的事情，即在前端显示一些东西。但我无法让任何东西工作。我可以将内容记录到控制台或执行任何 Javascript 功能，例如设置某些内容的 innerHTML，但是我将在哪里/如何放置 return 语句以在 span 标签中显示结果？甚至如“你好！”。

一如既往的感谢！

标签： javascriptreactjs

解决方案

如果您需要更多有关状态的帮助，我建议您在 react 中查看新的 hooks api 或旧的 Class 组件。以下代码将搜索数据，然后设置状态，以便组件知道要更新。您也可能不想直接在渲染中运行该映射，因为每次组件更新时都会重新运行您的获取。

import React, { useState, useEffect } from "react";

const App = () => {
  const [artistsInfo, setArtistsInfo] = useState([]);

  useEffect(async () => {
    let artistData = require("./mass-artists.json");

    const promises = artistData.map(theArtist => {
      return fetch(
        `[url]https://api.scryfall.com/cards/search?q=a:[/url]"${theArtist}"`
      )
        .then(response => {
          return response.json();
        })
        .then(myJson => {
          return myJson.data;
        });
    });
    const results = await Promise.all(promises);
    // results is an array of arrays because that is what your data seemed to be
    // you could use lodash flatten if you want to get a single array

    setArtistsInfo(results);
  }, []); // empty array so it only runs once

  // you could have a second useState to add a loader if you want

  return artistsInfo.map(infoArray => {
    return infoArray.map(singleInfo => {
      return <span key={singleInfo.id}>{singleInfo.name}</span>;
    });
  });
};

export default App;

推荐阅读