將對象作為道具傳遞並在 React js 中對其使用 map() 函數

Question

當我將對象數據作為道具傳遞給組件並使用map()函數遍歷數據時，我收到錯誤TypeError: Cannot read property 'map' of undefined 。

import React from 'react'
import styles from './social.module.css';
import {Button, Typography, CardContent, CardActions, Card} from '@material-ui/core'
const SocialItem = ({
    Icon,
    title,
    mixed,
    red,
    blue,
    item
}) => {
    return (
        <Card className={styles.socialItem}>
            <CardContent>
                <Typography className={styles.socialItem__typo} variant="h4" component="h2">{title}</Typography>
                <Icon
                    className={`${styles.socialItem__Logo} ${mixed && styles.mixedInsta} ${blue && styles.blueFacebook} ${red && styles.redInsta}`}/>
                <div className={styles.desc}>
                    {item.map(itm => <li>{itm.price}</li>)}
                </div>
            </CardContent>
            <CardActions className=""></CardActions>
        </Card>
    )
}

export default SocialItem

Answer 1

我還沒有看到“項目”的樣子，假設它是一個實際的數組，你可以嘗試添加：

{item !== undefined && item.map(itm => <li>{itm.price}</li>)}

如果這不起作用，請檢查您作為“項目”道具傳遞給組件的內容。