React中使用slice后Map未返回JSX的问题排查

你遇到的问题核心是对slice方法的返回值结构理解有误：

• people.slice(0,1)返回的是包含第一个子数组的新数组，结构为[[{name: 'person 1'}]]，而非直接拿到目标子数组[{name: 'person 1'}]
• 当你直接对这个结果执行map时，遍历的是外层数组的元素（也就是那个子数组），而子数组本身没有name属性，所以渲染出的<h1>标签内容为空，页面自然显示空白

解决方法 #

只需要先从slice返回的数组中取出第一个元素（即目标子数组），再执行map即可：

const people = [
    [
        {
            name: 'person 1'
        }
    ],
    [
        {
            name: 'person 2'
        }
    ],
]

export default function Index() {
    return (
        <>
            {people.slice(0,1)[0].map((person) => {
                return <h1>{person.name}</h1>
            })}
        </>
    )
}

补充说明 #

你原本能正常运行的people[0].map写法，是因为people[0]直接获取到了第一个子数组（结构为[{name: 'person 1'}]），map遍历的是数组内的对象，自然能正确读取name属性。

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