Javascript 对象嵌套数组上的映射

我试图映射对象数组，每个数组包含另一个嵌套的对象数组。但是，映射在嵌套数组上不起作用。如何映射嵌套数组的内容

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

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

{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

的映射如下所示：

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

{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>
)})}

{this.props.items.map（item=>{
返回(
page_num={item.page_num}
状态：{item.status}
{item.table_text_data.map（（c，i）=>）
bottom={c.bottom}
高度={c.height}
左={c.right}
右={c.left}
text={c.text}
))}

)})}

page\u num

和

status

可以正常工作，但不适用于

表格文本数据

。我应该如何绘制地图

我也收到了警告的屏幕截图：

---

任何帮助都将不胜感激。谢谢

为什么不使用重复使用数组映射

{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>
)})}

{this.props.items.map（（item，i）=>{
返回(
page_num={item.page_num}
状态：{item.status}
{item.table_text_data.map（（c，j）=>）

bottom={c.bottom}
高度={c.height}
左={c.right}
右={c.left}
text={c.text}

))}

)})}

您可以使用嵌套映射功能访问文件。但是您需要指定嵌套映射（）只适用于

表格文本数据

属性，否则您的父映射函数将检查

表格文本数据

你可以像这样重写代码

{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>
)})}

{this.props.items.map（item=>{
返回(

page_num={item.page_num}
状态：{item.status}

如果（项目==='table\u text\u data'）{
{item.table_text_data.map（（c，i）=>）
返回(
bottom={c.bottom}
高度={c.height}
左={c.right}
右={c.left}
text={c.text}
))
}
)}

)})}

您给出的错误是有答案的

列表中的每个子项都应该有一个唯一的

键

prop

通过提取保存嵌套对象的索引，您已经完成了一半。 现在只需将属性

key={I}

添加到

ul

const项=[
{
页码：1，
状态：“已处理”，
表\u文本\u数据：[
{底部：58，高度：60，左侧：60，右侧：67，文本：“录制”}，
{底部：75，高度：67，左侧：50，右侧：60，文本：“符号”}，
{底部：80，高度：80，左：77，右：89，文本：“发烧”}，
]
},
{
页码：2，
状态：“已处理”，
表\u文本\u数据：[
{底部：58，高度：60，左侧：60，右侧：67，文本：“录制”}，
{底部：75，高度：67，左侧：50，右侧：60，文本：“符号”}，
{底部：80，高度：80，左：77，右：89，文本：“发烧”}，
]
}
];
常量项显示=（道具）=>(
{props.items.map（item=>(

page_num={item.page_num}
状态={item.status}
{item.table_text_data.map（（c，i）=>）

bottom={c.bottom}
高度={c.height}
左={c.right}
右={c.left}
text={c.text}

))}

))}
);
ReactDOM.render(
,
document.getElementById（“react”）
);

我现在试过了，但还是不走运。这也不是抹平错误。可能有什么问题？您的确切要求是什么？您看到的错误是什么？我想提取
表\u文本\u数据中的内容。这似乎是某种逻辑错误。我已经根据您给定的代码片段编辑了上面的代码。请务必检查。删除第4I行中的。但仍然不走运：（这应该与您的问题类似，希望有帮助。这应该与您的问题类似，希望有帮助。不起作用。无法指定if语句。如果可能，还有其他解决方案吗？