如何在 React 中映射对象数组答案

【问题标题】：How to map an array of objects in React如何在 React 中映射对象数组
【发布时间】：2017-04-22 23:58:09
【问题描述】：

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

我要映射的对象数组：

const theData = [
    {
        name: 'Sam',
        email: 'somewhere@gmail.com'
    },

    {
        name: 'Ash',
        email: 'something@gmail.com'
    }
]

我的组件：

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
}

我错过了什么？

【问题讨论】：

你要打印的数据是数组吗？
map function for objects (instead of arrays)的可能重复
是 [object Object] 在您尝试运行时打印在
标签中
不，没有返回任何内容

标签： arrays object dictionary reactjs components

【解决方案1】：

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

在你的组件中

 [
    {
        name: 'Sam',
        email: 'somewhere@gmail.com'
    },

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

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

看看我在mapping an array to jsx的回答

【讨论】：

无法让它工作，破坏了构建并且没有渲染。
糟糕 - 遗漏了一个 '.'我的错。效果很好，也感谢您解释原因

【解决方案2】：

我认为您想打印此人的姓名或姓名和电子邮件：

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>,
   ]);
});

【讨论】：

这仅返回对象的名称。例如，如果我运行它，它会返回 Sam 和 Ash 而不是来自对象的电子邮件值

【解决方案3】：

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

[{
    name: 'Sam',
    email: 'somewhere@gmail.com'
 },
 {
    name: 'Ash',
    email: 'something@gmail.com'
 }
].map( ( {name, email} ) => {
    return <p key={email}>{name} - {email}</p>
})

干杯！

【讨论】：

【解决方案4】：

你必须把对象放在你的 JSX 中，这样做很简单，只需在这里查看我的简单代码：

const link = [
  {
   name: "Cold Drink",
   link: "/coldDrink"
  },
  {
   name: "Hot Drink",
   link: "/HotDrink"
  },

{ 名称：“芝士蛋糕”，链接：“/ CheaseCake” } ]; 并且您必须在代码中使用简单对象映射此数组，请参阅此代码：

const links = (this.props.link);
{links.map((item, i) => (
 <li key={i}>
   <Link to={item.link}>{item.name}</Link>
 </li>
 ))}

我希望这个答案对你有所帮助...:)

【讨论】：

【解决方案5】：

通过数据手指输出地图功能的演示 https://reactjs.org/docs/lists-and-keys.html

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

【讨论】：

【解决方案6】：

试试下面的sn-p

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

【讨论】：