Javascript 如何在对象中循环时渲染多个组件，然后插值相关的JSX？

我在一个网站上工作，从纽约时报的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、postNY.links、postNY.titles、postNY.sections、postNY.dates、postNY.summary）

等等，直到我达到最高的图像索引

然后将这些信息显示到我设计的每个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>
        )
        
    }

const renderEverything=（）=>{
const renderImgs=postNY.images
const renderSummaries=postNY.summaries
const renderLinks=postNY.links
const rendertiles=postNY.titles
const renderDates=postNY.dates
const renderSections=postNY.sections
const rendervery=renderings.map（（元素）=>
{renderings[0]}
{renderSummaries[0]}
{renderLinks[0]}
{rendertiles[0]}
{renderDates[0]}
{renderSections[0]}
)
返回(
{rendevery}
)
}

以下是完整的代码：

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

import React，{useState，useffect}来自“React”
导入“../PageContent/PageContent.css”
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
从“@fortwome/free solid svg icons”导入{faThumbsUp，faHeart}
常量页面内容=（道具）=>{
const[postNY，setPostNY]=useState({
图像：[]，
链接：[]，
标题：[]，
章节：[]，
日期：[]，
摘要：[]
})
useffect（（）=>{
取回（“https://api.nytimes.com/svc/mostpopular/v2/viewed/1.json?api-键=uCErKitNpdG7E7ma9rT0IxEGZ4xKs8Vw”）
.然后（（res）=>res.json（））
.然后（（objArr）=>{
//获取IMG
var imgs=[]
for（Object.entries中的var键（objArr）[3][1]）{
var obj=Object.entries（objArr）[3][1][key]
Object.entries（obj['media']）.forEach（elem=>
{
imgs.push（元素[1]['media-metadata'][2].url）
}
) 
}
//获取链接
var url=[]
Object.entries（objArr）[3][1].forEach（elem=>url.push（elem.url））
//获得头衔
变量标题=[]
Object.entries（objArr）[3][1].forEach（elem=>titles.push（elem.title））
//获取节标记
var节=[]
Object.entries（objArr）[3][1].forEach（elem=>sections.push（elem.section））
//获取发布日期
var options={weekday:'long'，year:'numeric'，month:'long'，day:'numeric'}；
变量日期=[]
Object.entries（objArr）[3][1].forEach（elem=>
{ 
var myDate=新日期（要素发布日期）；
日期推送（myDate.toLocaleDateString（“en-US”，选项））
}
)
//获取简要摘要
var摘要=[]
Object.entries（objArr）[3][1].forEach（elem=>summaries.push（elem.abstract））；
塞波斯特尼({
图片：imgs，
链接：URL，
标题：标题，
章节：章节，
日期：日期，
摘要：摘要
})
})
}, [])
const renderEverything=（）=>{
const renderImgs=postNY.images
const renderSummaries=postNY.summaries
const renderLinks=postNY.links
const rendertiles=postNY.titles
const renderDates=postNY.dates
const renderSections=postNY.sections
const rendervery=renderings.map（（元素）=>
{renderings[0]}
{renderSummaries[0]}
{renderLinks[0]}
{rendertiles[0]}
{renderDates[0]}
{renderSections[0]}
)
返回(
{rendevery}
)
}
返回(
{renderEverything（）}
)
}
导出默认页面内容

如果出现错误，则需要使用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>
        )
        
    }

const renderEverything=（）=>{
const renderImgs=postNY.images
const renderSummaries=postNY.summaries
const renderLinks=postNY.links
const rendertiles=postNY.titles
const renderDates=postNY.dates
const renderSections=postNY.sections
const renderivery=renderings.map（（元素，i）=>
{renderings[i]}
{renderSummaries[i]}
{renderLinks[i]}
{renderitles[i]}
{renderDates[i]}
{renderSections[i]}
)
返回(
{rendevery}
)
}