Arrays React对象中的嵌套数组

我如何构造它以停止获取未定义的无法读取属性映射？note对象本身如下所示。对于辅助阵列任务，我也需要重复此步骤。我在很多其他示例中遇到的问题是，它们要么基于类，要么用数组映射数组。我觉得这应该更容易些，但我已经尝试了1000种方法，但没有一种有效

const注释=[
{ 
id:noteId，
注：注：，
notePostedBy:“”
}
];  

import React，{useContext，useffect}来自“React”；
从“./NoteItem”导入NoteItem；
从“../../context/Lead/LeadContext”导入LeadContext；
常量注释=（）=>{
const leadContext=useContext（leadContext）；
const{lead}=leadContext；
返回(
{lead.notes.map（（note=>）}
);
}
导出默认票据；

×
TypeError:无法读取未定义的属性“map”
笔记
C:/Webdev/ntenet/client/src/components/popkis/Notes.js:13
10 | 
11 |  
12 |返回(
> 13 |   
14 |{lead.notes.map（（note=>）}
15 |   
16 |   );

从API获取数据时，必须确保依赖数据的组件在API数据成功加载到上下文之前不会呈现。有几种方法可以做到这一点

最简单的方法是这样：

import React, { useContext, useEffect  } from 'react';
import NoteItem from './NoteItem';
import LeadContext from '../../context/Lead/leadContext';

const Notes = () => {
  const leadContext = useContext(LeadContext);
  const { lead } = leadContext;


  return (
    <>
    { lead.notes
      ?
        <div className='leadul'>
         {lead.notes.map((note => <NoteItem key={note.id} note={note}/>))} 
        </div>
      : 
        <p>Data is still loading! Show a nice loading icon here</p>
    }
    </>
  );
}

export default Notes;

import React，{useContext，useffect}来自“React”；
从“./NoteItem”导入NoteItem；
从“../../context/Lead/LeadContext”导入LeadContext；
常量注释=（）=>{
const leadContext=useContext（leadContext）；
const{lead}=leadContext；
返回(
{lead.notes
?
{lead.notes.map（（note=>）}
: 
数据仍在加载！在此处显示一个漂亮的加载图标

}
);
}
导出默认票据；

当呈现组件时，react没有获得任何数据，并且视图已经呈现，您在那里有一个条件语句，例如

 return (
    <div className='leadul'>
      {
        lead && lead.notes ? 
         lead.notes.map(note => (
           <NoteItem 
            key={note.id} 
            note={note}
           />
          )
         ) : <></>
       } 
     </div>
 );

返回(
{
lead&&lead.notes？
lead.notes.map（note=>(
)
) : 
} 
);

您是否从API获取lead对象？看起来您正在提取它，并且您的组件在lead对象指定注释之前呈现。你能用控制台记录lead对象吗？它看起来好像没有注释（至少在第一次渲染时）。线索确实来自我的后端，但当我拿出地图并查看console.log（lead.notes）时，注释就在那里。它在那里。你确定它从一开始就在那里吗？对于第一次渲染，它可能是

未定义的

，在第二次渲染之后，它可能成为对象，但随后错误已经抛出。我回答了。@MickeyGray还不确定原因是什么，但可以肯定的是，

notes

属性在到达代码中的该点时没有设置。不幸的是，从片段中很难看出这是如何发生的。也许这里还有更多的代码要包含。另外，尝试在呈现页面的

return

语句之前记录

lead

的值。两种解决方案都有效，关于此元素还有更多问题，请注意。

import React, { useContext, useEffect  } from 'react';
import NoteItem from './NoteItem';
import LeadContext from '../../context/Lead/leadContext';

const Notes = () => {
  const leadContext = useContext(LeadContext);
  const { lead } = leadContext;


  return (
    <>
    { lead.notes
      ?
        <div className='leadul'>
         {lead.notes.map((note => <NoteItem key={note.id} note={note}/>))} 
        </div>
      : 
        <p>Data is still loading! Show a nice loading icon here</p>
    }
    </>
  );
}

export default Notes;

 return (
    <div className='leadul'>
      {
        lead && lead.notes ? 
         lead.notes.map(note => (
           <NoteItem 
            key={note.id} 
            note={note}
           />
          )
         ) : <></>
       } 
     </div>
 );