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

Question

我正在开发一个从 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.images1,postNY.links1,postNY.titles1,postNY.sections1, postNY.dates1, postNY .summaries1)

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

然后将该信息显示到我设计的每个自己的 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

Answer 1

你有错误，你需要使用 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>
        )
        
    }