Question

function RenderLeader({leader}){
    return(
        <div className="col-12 mt-5" key={leader.id}>
            <Media tag="li">
                <Media left middle>
                    <Media object src={leader.image} alt={leader.name}/>
                </Media>
                <Media body>
                    <Media heading>{leader.name}</Media>
                    <p>{leader.designation}</p>
                    <p>{leader.description}</p>
                </Media>
            </Media>
        </div>
    );
}

function About(props) {

    const leaders = props.leaders.map((detailsOfLeader) => {
        return(
                <RenderLeader key={detailsOfLeader.id} leader={detailsOfLeader}/>
        );
    });

    return(
        <div className="container">
            <div className="row">
                <Breadcrumb>
                    <BreadcrumbItem><Link to="/home">Home</Link></BreadcrumbItem>
                    <BreadcrumbItem active>About Us</BreadcrumbItem>
                </Breadcrumb>
                <div className="col-12">
                    <h3>About Us</h3>

Answer 1

我认为Leaders数组是object或null，这就是为什么您无法映射的原因如果领导者为空，则写props.leaders && props.leaders.map

TypeError：无法读取未定义的属性“ map”任何解决方案？

1 个答案: