web-dev-qa-db-ja.com

Reactのオブジェクトの配列をマップする方法

オブジェクトの配列があります。このオブジェクトの配列をマップしたいと思います。配列をマッピングする方法は知っていますが、オブジェクトの配列をマッピングする方法がわかりません。これは私がこれまでにやったことです：

マップしたいオブジェクトの配列：

const theData = [
    {
        name: 'Sam',
        email: '[email protected]'
    },

    {
        name: 'Ash',
        email: '[email protected]'
    }
]

私のコンポーネント：

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
}

私は何が欠けていますか？

arraysobjectdictionaryreactjscomponents
12
user3622460

必要なのは、オブジェクトの配列をマップし、すべてのアイテムがオブジェクトになることを覚えておいて、たとえばドット表記を使用してオブジェクトの値を取得することです。

コンポーネント内

 [
    {
        name: 'Sam',
        email: '[email protected]'
    },

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

また、jsxの配列を配置すると、意味が異なり、配列を配置できるので、単にrenderメソッドにオブジェクトを配置することはできません。

配列をjsxにマッピングする で私の答えを見てください

20
FurkanO

私はあなたが人の名前または名前と電子メールの両方を印刷したいと思う：

const renObjData = this.props.data.map(function(data, idx) {
    return <p key={idx}>{data.name}</p>;
});

または ：

const renObjData = this.props.data.map(function(data, idx) {
   return ([
       <p key={idx}>{data.name}</p>,
       <p key={idx}>{data.email}</p>,
   ]);
});
2
Sagi_Avinash_Varma

@FurkanOは適切なアプローチを提供しています。よりクリーンなアプローチ（es6の方法）に行く場合でも、次のようなことができます

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

乾杯！

1
Aakash

次のスニペットを試してください

const renObjData = this.props.data.map(function(data, idx) {
    return <ul key={idx}>{$.map(data,(val,ind) => {
        return (<li>{val}</li>);
    }
    }</ul>;
});
0
amritdevilo