呈现React中的<article>周围组件

Question

我试图返回一个‘卡片’的列表，每一个包含三个组成部分。

父级ItemCard返回以下内容：

        <>  
            <article>
          <ItemName data={items} />
          <ItemMap data={items} />
          <FavouriteButton data={items} />
            </article>
        </>
    ) 

每个子组件都有一个.map来呈现数组中的每个项：

const ItemName = (props) => {
    
    return (
        <>
            {props.data.map((item) =>
                <p key={item.title}>{item.title}</p>
                )}
        </>
    )
} 

我想围绕从ItemCard返回的三个组件，以便每个实例都是自己的文章。目前，我得到了一篇包含ItemNames列表的大文章，然后是ItemMaps，然后是按钮。我想要25篇文章，每一篇都有ItemName，ItemMap和Button。

我唯一的想法是使用forEach来完成这个任务，但我无法让它正常工作。

任何小费都非常感谢！

Answer 1

嗨，汉娜，欢迎来到堆栈溢出。使用data.map函数，您几乎得到了正确的答案。您只需将文章放入映射迭代器的返回中即可。

const App = (props) => {
    return (
        <>
            {props.data.map((item) => (
                <ItemCard item={item} />
            ))}
        </>
    );
};

const ItemCard = ({item}) => {
    return (
        <article>
            <ItemName item={item} />
            <ItemMap item={item} />
            <FavouriteButton item={item} />
        </article>
    );
};

您需要更改ItemName、ItemMap和FavouriteButton的实现，以考虑到道具结构的变化。

Answer 2

非常感谢你的帮助！

我重新考虑了你的建议，但不能使它正常工作。现在，我已经获得了父级的ItemsListContainer，这个组件获取数据，以状态存储它，并返回ItemCard(s)。

const dataUrl = "https://s3-eu-west-1.amazonaws.com/olio-staging-images/developer/test-articles-v4.json"

const ItemsListContainer = () => {

    const [items, setItems] = useState([])
    
    const fetchItemData = async () => {
        const response = await fetch(dataUrl)
        const jsonData = await response.json()
        setItems(jsonData)
        console.log(items)
        }
    
    useEffect(() => {
        fetchItemData()
    }, [])

    if(items.length > 0) {

        return (
        <>
            {items.map((item) => (
                <ItemCard item={item} />
            ))}
        </>
        )
        
    } else {
        return (
            <div>Loading items...</div>
        )
    }
}

ItemCard返回以下三个组件：

const ItemCard = ({item}) => {
    
    return (
        <>  
            <article>
                <ItemName item={item} />
                <ItemMap item={item} />
                <FavouriteButton item={item} />
            </article>
        </>
    ) 
}

ItemName分别返回以下内容：

const ItemName = (props) => {
    
    console.log(props.item.title)

    return (
        <>
            {props.item.map((item) => (
                <p key={item.title}>{item.title}</p>
            ))}
        </>
    )
}

我在控制台中遇到的错误是“Uncaught: props.item.map不是ItemName (ItemName.js:6)中的函数”。

console.log工作并打印我希望在p标记中显示的内容。