开发者问题收集

从获取的 JSON API 调用传播图像时出现问题

2020-06-28
25
reactjs

我创建了此代码，使用来自 API 调用的图像呈现不同的卡片： 

import React from "react";
import './IGPostCard.style.scss'

export const PostCard = ({timelinePhotos}) => (
        <div className='postContainer'>
            
            {
                timelinePhotos.filter((item, idx) => idx < 12)
                    .map(({id, display_url}) => (
                        <img className='cardTemplate' key={id} src={display_url}/>
                    ))
            }
        </div>
    )

完整项目的链接可以在这里找到： https://github.com/GhostCrawl3r/Instagram-Website-Addon

从 console.log 中，这是开发控制台中显示的获取的 API 数据： 在此处输入图像描述

我不太擅长使用 map 函数，所以我很可能在实现它时犯了一个错误。 理论上，我应该能够循环遍历这个数组并从每个组件中提取 display_url 并呈现它。

如能得到任何帮助，我将不胜感激。:)

1个回答

假设 timelinePhotos prop 是您在屏幕截图中包含的数组，使用 Array.map 迭代这些项目的正确方法如下： 

const PostCard = ({ timelinePhotos }) => (
  <div className="postContainer">
    {timelinePhotos
      .filter((item, idx) => idx < 12)
      .map(({ node }) => (
        <img 
          className="cardTemplate" 
          key={node.id} 
          src={node.display_url} 
        />
      ))
    }
  </div>
);

这是因为数组中的每个元素都是一个具有 node 属性的对象，该属性包含您想要显示的属性和值。

如果您想进一步破坏，可以执行以下操作： 

const data = Array.from({ length: 20 }).map((_, idx) => ({
  node: {
    id: idx + 1,
    display_url: `https://example.com/post/${idx + 1}`
  }
}));

console.log("example", data[0]);

const temp = data
  .filter((item, idx) => idx < 12)

  // destruct property of an object
  .map(({ node: { id, display_url } }) => {
    console.log(id, display_url);
    return { id, display_url };
  });
  
console.log("result", temp[0]);

希望这对您有所帮助。

goto
2020-06-28