Почему я получаю 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 не определено. Вот почему вы получаете ошибку.