React TypeScript无法读取未定义的属性“ map”

时间:2019-11-29 19:32:34

标签: reactjs typescript asp.net-core react-tsx

您好,问题是当要使用map进行迭代时,重新生成react组件时会抛出错误

DropDownListCustomer.tsx:46 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
    at DropDownListCustomer.render (DropDownListCustomer.tsx:46)
    at f._renderValidatedComponentWithoutOwnerOrContext (vendor.js?v=sZBD4ty28krojWTr8aPA_g_AGMpt_Nhz9VS_g69om6M:54)
    at f._renderValidatedComponent (vendor.js?v=sZBD4ty28krojWTr8aPA_g_AGMpt_Nhz9VS_g69om6M:54)
    at f._updateRenderedComponent (vendor.js?v=sZBD4ty28krojWTr8aPA_g_AGMpt_Nhz9VS_g69om6M:54)
    at f._performComponentUpdate (vendor.js?v=sZBD4ty28krojWTr8aPA_g_AGMpt_Nhz9VS_g69om6M:54)
    at f.updateComponent (vendor.js?v=sZBD4ty28krojWTr8aPA_g_AGMpt_Nhz9VS_g69om6M:54)
    at f.performUpdateIfNecessary (vendor.js?v=sZBD4ty28krojWTr8aPA_g_AGMpt_Nhz9VS_g69om6M:54)
    at Object.performUpdateIfNecessary (vendor.js?v=sZBD4ty28krojWTr8aPA_g_AGMpt_Nhz9VS_g69om6M:35)
    at s (vendor.js?v=sZBD4ty28krojWTr8aPA_g_AGMpt_Nhz9VS_g69om6M:29)
    at r.perform (vendor.js?v=sZBD4ty28krojWTr8aPA_g_AGMpt_Nhz9VS_g69om6M:35)

该组件在另一个组件内部。

interface CustomerListModel {
    results: Customer[];
}
interface Customer {
    CustomerID: number;
    Name: string;
    AddressID: number;
}
interface CustomerProps { }
interface CustomerState {
    CustomerList: CustomerListModel | null;
}
class DropDownListCustomer extends React.Component<CustomerProps, CustomerState>
{
    constructor(props: CustomerProps) {
        super(props);
        this.state = {
            CustomerList: null
        }
    }
    getCustomerList = () => {
        const url = "api/User/Get_All_Customer";
        fetch(url)
            .then(response => {

                return response.json();
            })
            .then(response => {
                this.setState({ CustomerList: response });
            });
    }
    public render() {
        let { CustomerList } = this.state
        console.log( CustomerList);
        return (
            <select className="DropDownListCustomer">
                {
                    CustomerList && CustomerList.results.map(customer => {
                        return (
                            <option key={customer.CustomerID}>{customer.Name}</option>
                        )
                    })
                }
            </select>
        )
    }
    componentDidMount() {
        this.getCustomerList();
    }
}
export default DropDownListCustomer

0 个答案:

没有答案