映射具有匹配所有者的对象

Question

我在一个 React 组件中有这个对象数组，并且只想映射那些所有者已登录网站的对象

const moles = [
        {name: 'Welthy Moles #001', image: Welthy1, Owner: 'Luis', id: 1 },
        {name: 'Welthy Moles #002', image: Welthy2, Owner: 'Pepe', id: 2 },
        {name: 'Welthy Moles #003', image: Welthy3, Owner: 'July', id: 3 },
        {name: 'Welthy Moles #004', image: Welthy4, Owner: 'Pepe', id: 4 },
        {name: 'Welthy Moles #005', image: Welthy5, Owner: 'Lola', id: 5 },
        {name: 'Welthy Moles #006', image: Welthy6, Owner: 'Luis', id: 6 },
        {name: 'Welthy Moles #007', image: Welthy7, Owner: 'Raul', id: 7 },
        {name: 'Welthy Moles #008', image: Welthy8, Owner: 'Brens', id: 8 },
        {name: 'Welthy Moles #009', image: Welthy9, Owner: 'Jack', id: 9 },
        {name: 'Welthy Moles #010', image: Welthy10, Owner: 'Sandra', id: 10 },
        {name: 'Welthy Moles #011', image: Welthy11, Owner: 'Pepe', id: 11 },
        {name: 'Welthy Moles #012', image: Welthy12, Owner: 'Luis', id: 12 },
        {name: 'Welthy Moles #013', image: Welthy13, Owner: 'Jose', id: 13 },
        {name: 'Welthy Moles #014', image: Welthy14, Owner: 'Sofy', id: 14 },
        {name: 'Welthy Moles #015', image: Welthy15, Owner: 'July', id: 15 },
        {name: 'Welthy Moles #016', image: Welthy16, Owner: 'Brens', id: 16 },
        {name: 'Welthy Moles #017', image: Welthy17, Owner: 'Brens', id: 17 },
        {name: 'Welthy Moles #018', image: Welthy18, Owner: 'Sofy', id: 18 },
        {name: 'Welthy Moles #019', image: Welthy19, Owner: 'Laura', id: 19 },
        {name: 'Welthy Moles #020', image: Welthy20, Owner: 'Charls', id: 20 }
    ];

我有这个地图配置，它通过 ID 显示所有这些，但不知道如何只显示匹配 mole.Owner = currentAccount

的那些

  {moles.map((mole) => (
                <div className='mole-preview' key={mole.id}>
                    <h1> #{mole.id} </h1>
                    <img src={mole.image} alt="mole" />
                    <h2> {mole.name} </h2>
                </div>
            ))}

Answer 1

使用筛选方法：

  {moles.filter(mole => mole.Owner === currentAccount).map((mole) => (
                <div className='mole-preview' key={mole.id}>
                    <h1> #{mole.id} </h1>
                    <img src={mole.image} alt="mole" />
                    <h2> {mole.name} </h2>
                </div>
            ))}

这样您就创建了一个数组，其中数组中的每一项都是一个鼹鼠，它的所有者与 currentAccount 变量的值相同。

Answer 2

您可以根据 currentAccount 过滤掉痣，然后在模板中使用过滤后的数组。

工作演示：

const moles = [
  {name: 'Welthy Moles #001', image: 'Welthy1', Owner: 'Luis', id: 1 },
  {name: 'Welthy Moles #002', image: 'Welthy2', Owner: 'Pepe', id: 2 },
  {name: 'Welthy Moles #003', image: 'Welthy3', Owner: 'July', id: 3 },
  {name: 'Welthy Moles #004', image: 'Welthy4', Owner: 'Pepe', id: 4 },
  {name: 'Welthy Moles #005', image: 'Welthy5', Owner: 'Lola', id: 5 },
  {name: 'Welthy Moles #006', image: 'Welthy6', Owner: 'Luis', id: 6 },
  {name: 'Welthy Moles #007', image: 'Welthy7', Owner: 'Raul', id: 7 },
  {name: 'Welthy Moles #008', image: 'Welthy8', Owner: 'Brens', id: 8 },
  {name: 'Welthy Moles #009', image: 'Welthy9', Owner: 'Jack', id: 9 },
  {name: 'Welthy Moles #010', image: 'Welthy10', Owner: 'Sandra', id: 10 },
  {name: 'Welthy Moles #011', image: 'Welthy11', Owner: 'Pepe', id: 11 },
  {name: 'Welthy Moles #012', image: 'Welthy12', Owner: 'Luis', id: 12 },
  {name: 'Welthy Moles #013', image: 'Welthy13', Owner: 'Jose', id: 13 },
  {name: 'Welthy Moles #014', image: 'Welthy14', Owner: 'Sofy', id: 14 },
  {name: 'Welthy Moles #015', image: 'Welthy15', Owner: 'July', id: 15 },
  {name: 'Welthy Moles #016', image: 'Welthy16', Owner: 'Brens', id: 16 },
  {name: 'Welthy Moles #017', image: 'Welthy17', Owner: 'Brens', id: 17 },
  {name: 'Welthy Moles #018', image: 'Welthy18', Owner: 'Sofy', id: 18 },
  {name: 'Welthy Moles #019', image: 'Welthy19', Owner: 'Laura', id: 19 },
  {name: 'Welthy Moles #020', image: 'Welthy20', Owner: 'Charls', id: 20 }
];

const currentAccount = 'Pepe';

const res = moles.filter((obj) => obj.Owner === currentAccount);

console.log(res);

映射具有匹配所有者的对象

Map objects with matching owner

javascript

arrays

mapping

reactjs