映射嵌套的对象数组

Question

我正在尝试映射对象数组，每个数组都包含另一个嵌套的对象数组。但是，地图不适用于嵌套数组。我如何映射嵌套数组的内容？

嵌套对象数组的数据结构如下所示：

const items = [
  {
    page_num: 1,
    status: "PROCESSED",
    table_text_data:[
        {bottom:58, height:60, left:60, right:67, text:"recorded"},
        {bottom:75, height:67, left:50, right:60, text:"symbolic"},
        {bottom:80, height:80, left:77, right:89, text:"fever"},
    ]
  }
];

page_num 和 status 的映射如下所示：

{this.props.items.map(item =>{ 
   return (
        <ul><li> page_num={item.page_num} </li>
         <li> status:{item.status}</li>
          {item.table_text_data.map((c,i)=>( 
           <ul><li>bottom={c.bottom}</li>
           <li>height={c.height}</li>
           <li>left={c.right}</li>
           <li>right={c.left}</li>
           <li>text={c.text}</li></ul>  
         ))}
        </ul>
)})}

page_num 和 status 工作正常但不适用于 table_text_data。我应该如何映射它？

我也收到警告的屏幕截图： https://i.stack.imgur.com/sqREQ.png

如有任何帮助，我们将不胜感激。谢谢

Answer 1

为什么不用re-use数组映射？

{this.props.items.map((item, i) =>{ 
   return (
        <ul key={'parent' + i}><li> page_num={item.page_num} </li>
         <li> status:{item.status}</li>
          {item.table_text_data.map((c,j)=>( 
           <li  key={'child' + j}>
           <ul><li>bottom={c.bottom}</li>
           <li>height={c.height}</li>
           <li>left={c.right}</li>
           <li>right={c.left}</li>
           <li>text={c.text}</li></ul>
           </li>
         ))}
        </ul>
)})}

Answer 2

您可以使用嵌套映射功能来访问文件。但是你需要指定嵌套的 map() 应该只适用于 table_text_data 属性，否则你的父映射函数将检查 table_text_data 中的内容你可以像

这样重写代码

{this.props.items.map(item =>{ 
   return(
<ul>
<li> page_num={item.page_num} </li>
<li> status:{item.status}</li>
</ul>
   if(item ==='table_text_data'){
      {item.table_text_data.map((c,i)=>( 
          return (
 <ul><li>bottom={c.bottom}</li>
           <li>height={c.height}</li>
           <li>left={c.right}</li>
           <li>right={c.left}</li>
           <li>text={c.text}</li></ul> 
))
}
)}
        </ul>
)})}

Answer 3

你给出的错误里面有答案。

Each child in a list should have a unique key prop

通过提取包含嵌套对象的索引，您已经完成了一半。现在您只需将属性 key={I} 添加到您的 ul

const items = [
  {
    page_num: 1,
    status: "PROCESSED",
    table_text_data:[
        {bottom:58, height:60, left:60, right:67, text:"recorded"},
        {bottom:75, height:67, left:50, right:60, text:"symbolic"},
        {bottom:80, height:80, left:77, right:89, text:"fever"},
    ]
  },
  {
    page_num: 2,
    status: "PROCESSED",
    table_text_data:[
        {bottom:58, height:60, left:60, right:67, text:"recorded"},
        {bottom:75, height:67, left:50, right:60, text:"symbolic"},
        {bottom:80, height:80, left:77, right:89, text:"fever"},
    ]
  }
];
    
const ItemDisplay = (props) => (
  <React.Fragment>
    {props.items.map(item => (
      <ul key={item.page_num}>
        <li>page_num={item.page_num}</li>
        <li>status={item.status}</li>
        {item.table_text_data.map((c,i) => ( 
          <ul key={i}>
            <li>bottom={c.bottom}</li>
            <li>height={c.height}</li>
            <li>left={c.right}</li>
            <li>right={c.left}</li>
            <li>text={c.text}</li>
          </ul>  
        ))}
      </ul>
    ))}
  </React.Fragment>
  );

ReactDOM.render(
  <ItemDisplay items={items} />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

映射嵌套的对象数组

Map over nested array of objects

javascript

reactjs

jsx

arrayobject