Question

TypeError：无法读取未定义的属性“ map”

我正在研究有关Reactjs的教程，并希望在AboutUs页面上添加此内容，但是当我将此组件传递给MainComponent时，我得到了一个错误：

 function About(props) {
     const leaders = props.leaders.map((leader) => {
         return (
             <p>Leader {leader.name}</p>
         );
     }
 }

考虑以下反应代码 AboutComponent.js文件为：

function About(props) {
    const leaders = props.leaders.map((leader) => {
        return (
            <p>Leader {leader.name}</p>
        );
    });
    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>
                    <hr />
                </div>                
            </div>
            <div className="row row-content">
                <div className="col-12 col-md-6">
                    <h2>Our History</h2>
                    <p>Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong.  Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.</p>
                    <p>The restaurant traces its humble beginnings to <em>The Frying Pan</em>, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.</p>
                </div>
                <div className="col-12 col-md-5">
                   ......
                </div>
                <div className="col-12">
                    <Card>
                        <CardBody className="bg-faded">
                            <blockquote className="blockquote">
                                <p className="mb-0">You better cut the pizza in four pieces because
                                    I'm not hungry enough to eat six.</p>
                                <footer className="blockquote-footer">Yogi Berra,
                                <cite title="Source Title">The Wit and Wisdom of Yogi Berra,
                                    P. Pepe, Diversion Books, 2014</cite>
                                </footer>
                            </blockquote>
                        </CardBody>
                    </Card>
                </div>
            </div>
            <div className="row row-content">
                <div className="col-12">
                    <h2>Corporate Leadership</h2>
                </div>
                <div className="col-12">
                    <Media list>
                        {leaders}
                    </Media>
                </div>
            </div>
        </div>
    );
}
export default About;

Answer 1

我认为您应该在渲染props.leaders之前像这样

function About(props) {
     const leaders = props.leaders && props.leaders.map((leader) => {
         return (
             <p>Leader {leader.name}</p>
         );
     }
 }

或

function About(props) {
     if (!props.leaders) return <div>Loading</div>
     const leaders = props.leaders.map((leader) => {
         return (
             <p>Leader {leader.name}</p>
         );
     }
 }

因为当您从后端或其他地方获取props.leaders时，它们可能是未定义的，并且在组件渲染后它会出现，因此在第一次渲染时会显示错误Cannot read property 'map' of undefine

React JS：TypeError：无法读取未定义的属性“ map”

TypeError：无法读取未定义的属性“ map”

1 个答案: