React使用数组和props渲染时报Nothing was returned from render错误

• 核心触发原因：Home组件未显式返回任何渲染内容。你使用了带大括号的箭头函数定义Home，该写法必须手动添加return语句返回需要渲染的JSX，否则组件执行后没有返回值，直接触发该报错。
• 另外存在两个隐性问题会导致后续运行异常：
  1. 自定义组件menu首字母为小写，React会将其识别为原生HTML的<menu>标签，不会按你编写的组件逻辑渲染
  2. 使用map遍历渲染列表元素时没有绑定唯一key属性，会触发React的列表渲染警告

按照以下步骤修改代码即可正常渲染预期内容：

1. 重命名menu文件为Menu.js，修改组件名为首字母大写的Menu，符合React自定义组件命名规范，修改后代码如下：

const Menu = (props) => {    
    return (
    <div>
        <h1>{props.h}</h1>
        <p>{props.p}</p>
    </div>
    )
}
export default Menu;

2. 修改Home文件，显式返回map遍历的结果，同时为列表项绑定唯一key属性，修改后代码如下：

import React from 'react';
import Note from "./Note";
import Menu from "./Menu";

function nCard(val) {
    return(
        <Menu
                key={val.id}
                h={val.h}
                p={val.p}
        />
    );
}
const Home = (props) => {     
    return Note.map(nCard)
}
export default Home;

如果你需要给渲染的列表套一层外层容器避免返回数组，也可以用空标签包裹：

const Home = (props) => {     
    return (
        <>
            {Note.map(nCard)}
        </>
    )
}

内容的提问来源于stack exchange，提问作者Maryam Naveed