javascript - 如何在循环对象时渲染多个组件,然后插入相关的 JSX?
问题描述
我正在一个从 NYT 的 API 中抓取数据的网站上工作。我已经拥有所有必要的数据(JPG 图片链接、文章链接、文章标题和日期)。我正在尝试创建多个 div 并将我拥有的信息存储到每个容器中,如下所示:
当我尝试使用 forEach 或 map 呈现信息并将其全部显示到一个容器中而不是使用自己的唯一信息创建自己的容器时,就会出现问题。所有的数组都是有序的,所以我需要做的就是像这样循环遍历每个数组:
(容器 1: postNY.images[0]、postNY.links[0]、postNY.titles[0]、postNY.sections[0]、postNY.dates[0]、postNY.summaries[0])
(容器 2: postNY.images 1,postNY.links 1,postNY.titles 1,postNY.sections 1,postNY.dates 1,postNY.summaries 1)
等等。直到我达到图像的最高索引
然后将该信息显示到我设计的每个自己的 div 容器中。
这是发生问题的代码:
const renderEverything = () => {
const renderImgs = postNY.images
const renderSummaries = postNY.summaries
const renderLinks = postNY.links
const renderTitles = postNY.titles
const renderDates = postNY.dates
const renderSections = postNY.sections
const renderEvery = renderImgs.map((elem) =>
<div className="container">
{renderImgs[0]}
{renderSummaries[0]}
{renderLinks[0]}
{renderTitles[0]}
{renderDates[0]}
{renderSections[0]}
</div>
)
return (
<div>
{renderEvery}
</div>
)
}
这是完整的代码:
import React, {useState,useEffect} from 'react'
import '../PageContent/PageContent.css'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import { faThumbsUp, faHeart} from '@fortawesome/free-solid-svg-icons'
const PageContent = (props) => {
const [postNY, setPostNY] = useState({
images: [],
links: [],
titles: [],
sections: [],
dates: [],
summaries: []
})
useEffect(() => {
fetch("https://api.nytimes.com/svc/mostpopular/v2/viewed/1.json?api-key=uCErKitNpdG7E7ma9rT0IxEGZ4xKs8Vw")
.then((res) => res.json())
.then((objArr)=>{
// GET IMG
var imgs = []
for (var key in Object.entries(objArr)[3][1]) {
var obj = Object.entries(objArr)[3][1][key]
Object.entries(obj['media']).forEach(elem =>
{
imgs.push(elem[1]['media-metadata'][2].url)
}
)
}
// GET LINKS
var urls = []
Object.entries(objArr)[3][1].forEach(elem => urls.push(elem.url))
// GET TITLES
var titles = []
Object.entries(objArr)[3][1].forEach(elem => titles.push(elem.title))
// GET SECTION TAG
var sections = []
Object.entries(objArr)[3][1].forEach(elem => sections.push(elem.section))
// GET PUBLISHED DATE
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var dates = []
Object.entries(objArr)[3][1].forEach(elem =>
{
var myDate = new Date(elem.published_date);
dates.push(myDate.toLocaleDateString("en-US", options))
}
)
// GET BRIEF SUMMARIES
var summaries = []
Object.entries(objArr)[3][1].forEach(elem => summaries.push(elem.abstract));
setPostNY({
images: imgs,
links: urls,
titles: titles,
sections: sections,
dates: dates,
summaries: summaries
})
})
}, [])
const renderEverything = () => {
const renderImgs = postNY.images
const renderSummaries = postNY.summaries
const renderLinks = postNY.links
const renderTitles = postNY.titles
const renderDates = postNY.dates
const renderSections = postNY.sections
const renderEvery = renderImgs.map((elem) =>
<div className="container">
{renderImgs[0]}
{renderSummaries[0]}
{renderLinks[0]}
{renderTitles[0]}
{renderDates[0]}
{renderSections[0]}
</div>
)
return (
<div>
{renderEvery}
</div>
)
}
return (
<div className="page-content">
{renderEverything()}
</div>
)
}
export default PageContent
解决方案
您有错误,您需要使用 i 而不是 0。
const renderEverything = () => {
const renderImgs = postNY.images
const renderSummaries = postNY.summaries
const renderLinks = postNY.links
const renderTitles = postNY.titles
const renderDates = postNY.dates
const renderSections = postNY.sections
const renderEvery = renderImgs.map((elem, i) =>
<div className="container">
{renderImgs[i]}
{renderSummaries[i]}
{renderLinks[i]}
{renderTitles[i]}
{renderDates[i]}
{renderSections[i]}
</div>
)
return (
<div>
{renderEvery}
</div>
)
}
推荐阅读
- java - 用符号后的长度替换字符串
- c# - 如何将 AntiForgeryToken 与 Fetch 一起使用?
- r - 在 Ubuntu Bionic Beaver (18.04)、x86_64 中安装 RStudio 时的权限问题
- react-native - 在 setState false 后反应本机模式未关闭
- angular - 离子:无法进行产品构建 appRate ionic4
- jquery - 如何在移动元素时保持对齐
- kotlin - Kotlin 协程:在 Sequence::map 中调用 Deferred::await
- android - 什么触发 LiveData onChanged()?
- php - 在 MacOs Mojave 上找不到 XAMPP 的 httpd-xampp.conf 文件
- amazon-web-services - 我确实有一个来自 aws ec2 实例的 .pem 文件。但是该实例没有附加键名。