为什么在尝试运行我的代码时会收到 TypeError？

Question

我试图弄清楚为什么我会Cannot destructure property 'id' of 'this.props.customer' as it is undefined.出错。从外观上看，我的代码似乎是正确的，但尽管如此，我仍然遇到上述错误。有什么我忽略的微不足道的东西吗？这是CustomerList.js文件：import React, { Component } from "react";import Customer from "./Customer";class CustomerList extends Component {    render() {        const customers = this.props.customers;        return(            <div className="data">                <table className="ui celled table">                    <thead>                        <tr>                            <th style={{ width: '50px', textAlign: 'center' }}>#</th>                            <th>Name</th>                            <th>E-mail</th>                            <th style={{ width: '148px' }}>Action</th>                        </tr>                    </thead>                    <tbody>                    {                        customers.map(customer => {                            return <Customer customer={customer} key={customer.id} />;                        })                    }                        <Customer/>                    </tbody>                </table>            </div>        );    }}export default CustomerList;这是Customer.js：import React, { Component } from 'react';class Customer extends Component {    render() {        const { id, first_name, last_name, email } = this.props.customer;        return (            <tr>                <td style={{ textAlign: 'center' }}>{id}</td>                <td>{`${first_name} ${last_name}`}</td>                <td>{email}</td>                <td>                    <button className="mini ui blue button">Edit</button>                    <button className="mini ui red button">Delete</button>                </td>            </tr>        );    }}export default Customer;

Answer 1

map在你有一个单一的部分下面

<Customer/>

这个对Customer组件的调用没有参数，所以customer是未定义的。这就是你得到错误的原因。