React中使用.map遍历useState数据无法渲染的问题排查

你的代码问题出在map的回调函数里——你写了JSX元素，但没把它返回出去，导致map最终生成的是一个全为undefined的数组，React没法渲染任何内容。

修复方案 #

有两种简单的修改方式：

1. 显式添加return语句：

return (
    <div>
        {
            people.map(person => {
                // 这里加上return
                return <h1>{person.name}</h1>
            })
        }
    </div>
)

2. 使用箭头函数的隐式返回：
   如果回调函数只有一行返回逻辑，可以去掉大括号，或者用括号把JSX包起来（避免换行时的语法问题）：

return (
    <div>
        {
            // 方式一：去掉大括号
            people.map(person => <h1>{person.name}</h1>)
            // 方式二：用括号包裹JSX（适合多行情况）
            // people.map(person => (
            //     <h1>{person.name}</h1>
            // ))
        }
    </div>
)

另外，建议给map遍历的元素加上唯一的key属性，这是React的最佳实践，避免后续可能出现的警告：

people.map((person, index) => (
    <h1 key={index}>{person.name}</h1>
))
// 后续如果数据里有唯一标识（比如person.id），优先用唯一标识当key

你的useState初始化是没问题的，不需要setState也能展示初始状态的数据，只要把map的返回逻辑修正就能正常渲染了。

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