javascript - 为什么我在尝试运行代码时收到类型错误？

Question

我试图弄清楚为什么我收到无法解构'this.props.customer'的属性'id'，因为它未定义。错误。从外观上看，我的代码似乎是正确的，但尽管如此，我仍然收到上述错误。有什么我忽略的小事吗？

这是 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 未定义。这就是您收到错误的原因。