React多层组件传props后map渲染报错，页面白屏求助

你的问题出在TrackList组件的map遍历逻辑中：箭头函数使用大括号包裹函数体时，没有显式返回Track组件，导致map返回的是一个由undefined组成的数组，React无法识别并渲染，进而引发白屏报错。

修正后的TrackList代码（两种可选写法） #

写法1：使用小括号让箭头函数自动返回 #

import React from "react";
import './TrackList.css';
import Track from '../Track/Track'

export default function TrackList(props) {
    return(
        <div className="TrackList">
            {
                props.tracks.map(track => (
                    <Track track={track} key={track.id} />
                ))
            }
        </div>
    )
}

写法2：在大括号内显式添加return #

import React from "react";
import './TrackList.css';
import Track from '../Track/Track'

export default function TrackList(props) {
    return(
        <div className="TrackList">
            {
                props.tracks.map(track => {
                    return <Track track={track} key={track.id} />
                })
            }
        </div>
    )
}

原因说明 #

箭头函数的语法规则：

• 如果函数体用小括号()包裹，会自动返回括号内的表达式结果
• 如果用大括号{}包裹函数体，必须通过return语句明确指定返回值，否则默认返回undefined

你之前的代码用了大括号但没写return，所以map的每一项都返回undefined，React无法渲染这些无效内容，最终导致报错。

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