ReactJS Map函数问题：控制台可见数据但浏览器无法渲染

你的代码里map函数的回调没有返回要渲染的JSX元素，这就是浏览器不渲染数据但控制台能打印的原因——console.log(record.title)是直接执行的，但你没有把<div>返回给React去渲染。

修复方法有两种： #

1. 显式添加return语句 #

在回调的大括号里，把JSX元素用return返回：

{records.map((record) => {
    console.log(record.title);
    return <div>{record.title},{record.category},{record.content}</div>;
})}

2. 使用隐式返回（去掉大括号，改用小括号） #

如果回调里只有一行返回语句，可以去掉大括号，用小括号包裹JSX，实现隐式返回：

{records.map((record) => (
    <div key={record.title}>{record.title},{record.category},{record.content}</div>
))}

注意：React要求列表渲染的元素必须有唯一的key属性，这里用record.title当key（如果之后数据有重复title，建议用唯一id）。

额外提示 #

之后你如果要启用redux的records（注释掉的const records=useSelector((state)=>state.blogReducer)），要注意初始状态可能是空数组或者undefined，建议先做判断再渲染，避免报错：

{records?.map((record) => (
    <div key={record.id}>{record.title},{record.category},{record.content}</div>
))}

用可选链操作符?.可以在records为null/undefined时跳过map执行。

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