为什么在尝试运行我的代码时会收到 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是未定义的。这就是你得到错误的原因。