在 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> );