如何渲染多個插入 JSX 的組件？

Question

我正在一個使用 NYT 的 API 的網站上工作，我被困在試圖呈現我必須顯示所需信息的所有信息（JPG 圖像鏈接、文章鏈接、文章標題、文章日期） .

我將所有信息存儲在一個名為 postNY 的變量中，並將所有信息（來自 API）檢索到這些 arrays 中：

const [postNY, setPostNY] = useState({
    images: [],
    links: [],
    titles: [],
    sections: [],
    dates: [],
    summaries: []
})
// NOTE: OBJARR IS FROM API
// 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
setPostNY({
    images: imgs,
    links: urls,
    titles: titles,
    sections: sections,
    dates: dates,
    summaries: summaries
})

那么這就是我的問題發生的地方。 我嘗試將這樣的信息呈現到 JSX 中：

const renderEverything = () => {
    const renderImgs = postNY.images.map((img) => <img src={img}></img>)
    const renderSummaries = postNY.summaries.map((summary) => <p className="desc">{summary}</p>)
    const renderLinks = postNY.links.map((link) => <p>{link}</p>)
    const renderTitles = postNY.titles.map((title) => <h2>{title}</h2>)
    const renderDates = postNY.dates.map((date) => <p>{date}</p>)
    const renderSections = postNY.sections.map((section) => <a href="#">{section}</a>)

    return (
        <div className="container">
            {renderImgs}
            {renderSummaries}
            {renderLinks}
            {renderTitles}
            {renderDates}
            {renderSections}
        </div>
    )
}

JSX：

return (
        <div className="page-content">
            
            {renderEverything}
            
        </div>
        
    )

這不會向站點返回任何內容。 我被困在如何實現將數組中的所有這些東西顯示到網站上。 每個數組都正確排序，我想在網站上顯示的是這個（到他們自己的每個容器中）：

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]

ETC...

有什么我可以采取的方法嗎？

這是完整的代碼：

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.map((img) => <img src={img}></img>)
        const renderSummaries = postNY.summaries.map((summary) => <p className="desc">{summary}</p>)
        const renderLinks = postNY.links.map((link) => <p>{link}</p>)
        const renderTitles = postNY.titles.map((title) => <h2>{title}</h2>)
        const renderDates = postNY.dates.map((date) => <p>{date}</p>)
        const renderSections = postNY.sections.map((section) => <a href="#">{section}</a>)

        return (
            <div className="container">
                {renderImgs}
                {renderSummaries}
                {renderLinks}
                {renderTitles}
                {renderDates}
                {renderSections}
            </div>
        )
    }
        
        
        

        
        
        
    
    

    return (
        <div className="page-content">
            
            {renderEverything}
            
        </div>
        
    )
}

export default PageContent

Answer 1

確保您實際調用的是返回內容的 function。 你有{renderEverything}它應該是{renderEverything()}

    return (
        <div className="page-content">
            {renderEverything()}
        </div>
    )

同樣在useEffect上提供一個空的依賴數組以使其運行一次，否則它將連續運行。

useEffect(() => {
    // your fetch code
}, []) // add this

---

就像注釋一樣，使用Object.entries會使您編寫的代碼非常冗長。 javascript 具有許多功能，可以輕松迭代對象和 Arrays。 當您可以說出 object 的名稱時，您不必使用索引。 你可以轉換這個

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

對此

let imgs = objArr.results.map( (entry) => entry.media?.[0]?.['media-metadata'][2].url )