简体   繁体   English

如何在循环通过 object 时渲染多个组件,然后插入相关的 JSX?

[英]How can I render multiple components while looping through an object and then interpolate the JSX associated?

I am working on a website that scrapes data from NYT's API.我在一个网站上工作,该网站从 NYT 的 API 中抓取数据。 I have all the data necessary already(JPG image links, links to the articles, titles to articles, and the dates).我已经拥有所有必要的数据(JPG 图片链接、文章链接、文章标题和日期)。 I am trying to create multiple divs and store the info I have into each of its own containers like this:我正在尝试创建多个 div 并将我拥有的信息存储到每个容器中,如下所示: 在此处输入图像描述

The problem arises when I try to render the info using forEach or map and it displays it all into one container instead of creating its own container with its own unique info.当我尝试使用 forEach 或 map 呈现信息并将其全部显示到一个容器中而不是使用自己的唯一信息创建自己的容器时,就会出现问题。 All the arrays are ordered so all I would need to do is to loop through each array like this:所有的 arrays 都是有序的,所以我需要做的就是像这样遍历每个数组:

( Container 1: postNY.images[0],postNY.links[0],postNY.titles[0],postNY.sections[0], postNY.dates[0], postNY.summaries[0]) 容器 1: postNY.images[0]、postNY.links[0]、postNY.titles[0]、postNY.sections[0]、postNY.dates[0]、postNY.summaries[0])

( Container 2: postNY.images 1 ,postNY.links 1 ,postNY.titles 1 ,postNY.sections 1 , postNY.dates 1 , postNY.summaries 1 ) 容器 2: postNY.images 1 ,postNY.links 1 ,postNY.titles 1 ,postNY.sections 1 ,postNY.dates 1 ,postNY.summaries 1

ETC.等等。 until I've reached the highest index of images直到我达到图像的最高索引

and then display that info into each of their own div containers I've styled.然后将该信息显示到我设计的每个自己的 div 容器中。

Here is the code where the problem is occurring:这是发生问题的代码:

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>
        )
        
    }

Here is the full code:这是完整的代码:

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

You have error, you need to use i instead of 0.您有错误,您需要使用 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>
        )
        
    }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM