在 React HOC 中渲染数组中的对象

Question

我有以下 React 类：

import React from 'react';
import { withTranslation, WithTranslation } from 'react-i18next';

interface State {
    payouts: any;
}

interface Props extends WithTranslation {}

class Payout extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            payouts: [
                {id: 'PO_3', owner: 'OWNER1', amount: 89},
                {id: 'PO_3', owner: 'OWNER2', amount: 150},
                {id: 'PO_4', owner: 'OWNER3', amount: 135}
            ]
        };
    }

    render() {
        return (
            <div>
                {
                    this.state.payouts.map((payout:any) => (
                        Object.entries(payout).map((val: any)=> (
                            <li>{val.id} - {val.owner} - {val.amount}</li>
                        ))
                    ))
                }
            </div>
        );
    }
}

export default withTranslation()(Payout);

我试图将我的状态呈现为<li>元素，但我确实得到了显示的任何数据。

也将是payouts: object[]接口正确吗？

Answer 1

我确实得到任何显示的数据

调用Object.entries将为您提供以下返回值：

 console.log(Object.entries({id: 'PO_4', owner: 'OWNER3', amount: 135}))

它是一个包含属性名称和值的数组数组。 当然，这些数组没有id 、 owner或amount属性。

你不想要任何这些。 payout已经是您要访问的对象。 只需删除该调用：

 return ( <div> { this.state.payouts.map((payout:any) => ( <li>{payout.id} - {payout.owner} - {payout.amount}</li> )) } </div> );