React渲染自定义组件数组报错：对象不可作为React子元素求助

我正在为未婚妻开发一款职场生产力Web应用的笔记模块，目前通过自研API获取笔记数据并存入state，尝试用JSX映射列表时触发报错，卡了两天，求解决。

相关代码如下：

const Notes = () => {
    const [notesList, setNotesList] = useState([]);
    useEffect(() => {
        // loadNotes执行fetch GET请求到服务器，返回数据格式：
        // {notes: [{ title: "Title", content: "This is the content of the note.", lastModified: "" }, { title: "Title 2", content: "This is the content of the second note.", lastModified: "" }]}

        loadNotes().then(data => setNotesList(data.notes))
    }, [])

    return
        <div className="notes-list">{notesList.map(item => return <NoteTab title={item.title} content={item.content} lastModified={item.lastModified} />)</div>
}

每次运行都会触发以下错误：

Objects are not valid as a React child (found: object with keys {title, content, lastModified}). If you meant to render a collection of children, use an array instead.

我试过用扩展运算符、在useEffect里映射、移除map里的return等方法，都没解决问题。

解决方案 #

你的代码存在两个关键语法问题，直接导致了报错：

1. 修复return语句的自动分号陷阱
   JS会在return后自动插入分号，如果return直接换行，后续的JSX代码不会被当作组件返回值，组件实际返回undefined，进而导致React尝试错误渲染notesList。必须用括号包裹返回的JSX：

2. 修正map回调的语法错误
   箭头函数用简洁体（无大括号）时不能写return，要么去掉return直接写JSX表达式，要么给回调加大括号并保留return。

另外，React要求列表渲染的每个元素必须有唯一key属性，虽然不是报错直接原因，但这是必须的规范，避免后续出现渲染异常。

修正后的完整代码：

const Notes = () => {
    const [notesList, setNotesList] = useState([]);
    useEffect(() => {
        loadNotes().then(data => setNotesList(data.notes))
    }, [])

    // 用括号包裹返回的JSX，修复自动分号问题
    return (
        <div className="notes-list">
            {/* 修正map回调语法，添加唯一key */}
            {notesList.map(item => (
                <NoteTab 
                    key={item.title} // 如果title不唯一，替换成后端返回的唯一id字段
                    title={item.title} 
                    content={item.content} 
                    lastModified={item.lastModified} 
                />
            ))}
        </div>
    )
}

如果title存在重复可能，一定要替换成后端返回的唯一标识（比如id）作为key。

内容的提问来源于stack exchange，提问作者Jason Garner