将对象作为道具传递并在 React js 中对其使用 map() 函数

Question

When I pass the object data as props to the component and looping through the data using the map() function I get the error 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

I haven't seen how the "item" looks like and supposing it's an actual array, you can try add this:

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

If this doesn't work check what you pass to the component as the "item" prop.