如何在对象数组中设置标志并渲染项目

Question

我正在尝试渲染数组中的特定对象。我应该在哪里设置标志？需要单循环

mappedData = (data) => {
return data.map((item) => {...logic}
}

这是我的示例对象 returns

item:[
{id: 1, entry_id: 1, name: 'test', email: 'foo@bar.com', isFirst:true},
{id: 2, entry_id: 1, name: 'test', email: 'bar@foo.com', isFirst:false},
{id: 3, entry_id: 2, name: 'test', email: 'foo@bar.com', isFirst:true},
{id: 4, entry_id: 2, name: 'test', email: 'bar@foo.com', isFirst:false},
{id: 5, entry_id: 1, name: 'test', email: 'joe@ocean.com', isFirst:true},
{id: 6, entry_id: 2, name: 'test', email: 'foo@bar.com', isFirst:false},
{id: 7, entry_id: 2, name: 'test', email: 'foo@bar.com', isFirst:false},
];

如何设置flag？并渲染 2 个不同的 div，其中在 div 中包含 entry_id 1，在另一个 div

中包含 entry_id 2

render(){
return(
if(this.mappedData.entry_id =1){
<div>All entry_id 1 data should appear</div>
}
if(this.mappedData.entry_id =2){
<div>All entry_id 2  data should appear</div>
}

最受欢迎的单循环不同解决方案

Answer 1

我能想到的最简单的方法是让你的两个 div 分开，然后在每个循环中运行单独循环返回 null （在你的错误情况下）：

代码可能如下所示（假设 item 是您的数组）：

<div>
{item.map((x) => {
  if(x.entry_id === 1){
      return <p>{x.name}</p>
  }
 return null;

})}
</div>
<div>
{item.map((x) => {
  if(x.entry_id === 2){
     return <p>{x.name}</p>
  }
 return null;
})}
</div>

如果item是一个对象属性，只需将item.map替换为data.item.map

Link

您也可以通过过滤在顶部制作单独的循环并显示它们。
如果您担心 null

filter

编辑：

OP 想要一个单循环的解决方案。可以这样实现：


  let div1 = [];
  let div2 = [];

  item.forEach((x) => {
    if (x.entry_id === 1) {
      div1.push(<p key={x.email}>{x.name}</p>);
    } else {
      div2.push(<p key={x.email}>{x.name}</p>);
    }
  });

  return (
    <div className="App">
      {
        <>
          {div1}
          {div2}
        </>
      }
    </div>
  );

Updated Link

如何在对象数组中设置标志并渲染项目

How to set a flag in array of objects and render items

reactjs

react-redux

react-hooks