React组件中的.map()抛出了一个错误:TypeError: notes.Map不是函数 &g

Question

我试图显示Noteitem在map函数内部返回的组件。

{notes.map((note) => {
return (
<Noteitem key={note._id} updateNote={updateNote} showAlert={props.showAlert} note={note} />
);
})}

Answer 1

notes应该是map函数工作的数组。如果notes不是null，并且是使用notes.length的数组并应用map函数

，您可以按以下方式检查它

{notes && notes.length && notes.map((note) => {
return (
<Noteitem key={note._id} updateNote={updateNote} showAlert={props.showAlert} note={note} />
);
})}

Answer 2

可以在JSX中放入if/else语句来检查变量是否存在

return (
<>
{
notes.length
? 'fallback'
: notes.map(note => <Noteitem key={note._id} updateNote={updateNote} showAlert={props.showAlert} note={note} />)
}
</>
)

IIFE

{(() => {
if ("check note") {
// fallback
}
return notes.map((note: NoteProps) => (
<Noteitem key={note._id} updateNote={updateNote} showAlert={props.showAlert} note={note} />
));
})()}