如何在 React 中映射对象数组

Question

我有一个对象数组。我想映射这个对象数组。我知道如何映射数组，但不知道如何映射对象数组。这是我到目前为止所做的：

我要映射的对象数组：

 const theData = [
    {
        name: 'Sam',
        email: '[e-mail]'
    },

    {
        name: 'Ash',
        email: '[e-mail]'
    }
]

我的组件：

 class ContactData extends Component {
    render() {
        //works for array
        const renData = this.props.dataA.map((data, idx) => {
            return <p key={idx}>{data}</p>
        });

        //doesn't work for array of objects
        const renObjData = this.props.data.map(function(data, idx) {
            return <p key={idx}>{data}</p>
        });

        return (
            <div>
                //works
                {rennData}
                <p>object</p>
                //doesn't work
                {renObjData}
            </div>
        )
    }
}

ContactData.PropTypes = {
    data: PropTypes.arrayOf(
        PropTypes.obj
    ),
    dataA: PropTypes.array
}

ContactData.defaultProps = {
    data: theData,
    dataA: dataArray
}

我错过了什么？

原文由 user3622460 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要映射对象数组并记住每个项目都是一个对象，以便您将使用例如点表示法来获取对象的值。

在您的组件中

 [
    {
        name: 'Sam',
        email: '[e-mail]'
    },

    {
        name: 'Ash',
        email: '[e-mail]'
    }
].map((anObjectMapped, index) => {
    return (
        <p key={`${anObjectMapped.name}_{anObjectMapped.email}`}>
            {anObjectMapped.name} - {anObjectMapped.email}
        </p>
    );
})

请记住，当您放置一个 jsx 数组时，它具有不同的含义，您不能只将对象放入您的渲染方法中，因为您可以放置一个数组。

看看我在 将数组映射到 jsx 时的回答

原文由 FurkanO 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

@FurkanO 提供了正确的方法。尽管要采用更清洁的方法（es6 方式），您可以这样做

[{
    name: 'Sam',
    email: '[e-mail]'
 },
 {
    name: 'Ash',
    email: '[e-mail]'
 }
].map( ( {name, email} ) => {
    return <p key={email}>{name} - {email}</p>
})

干杯!

原文由 Aakash 发布，翻译遵循 CC BY-SA 3.0 许可协议