时间戳

首页 > 解决方案 > 在 React HOC 中渲染数组中的对象

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

问题描述

我有以下反应类：

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[]界面也正确吗？

标签： javascriptreactjs

解决方案

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

调用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>
        );

推荐阅读