在.map()中调用React组件报错：TypeError: notes.map is not a function

报错原因1：notes初始值异常 #

如果notes的初始值为undefined、null或者非数组类型，首次渲染时调用map方法会直接抛出类型错误。
修复方案：

• 声明state时给notes设置默认空数组：

const [notes, setNotes] = useState([])

• 渲染前做兜底兼容：

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

报错原因2：key属性不符合要求 #

如果存在note._id重复、或者部分note对象没有_id字段的情况，会触发React渲染异常。
排查方案：临时将key替换为数组索引测试问题是否解决（生产环境不推荐用索引作为key，仅用于排查问题）：

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

如果替换后报错消失，说明原数据中_id字段存在异常，需要修正接口返回或本地数据处理逻辑。

报错原因3：Noteitem组件内部逻辑异常 #

如果map逻辑本身无问题，错误通常来自Noteitem组件内部对props的处理：比如组件内直接访问note的深层属性但没有做非空判断，当数据存在空值时就会抛出错误。
修复方案：在Noteitem组件内对传入的属性做非空兼容，比如用可选链操作符：

// Noteitem 组件内部示例
const noteTitle = note?.title ?? '无标题'

报错原因4：当前作用域变量未定义 #

确认当前代码作用域下updateNote方法、props.showAlert是可访问的，变量未定义也会直接抛出引用错误。可以在map代码前打印两个变量的值验证是否存在。

内容的提问来源于stack exchange，提问作者Arpit Verma