React中如何从嵌套对象数组中提取指定字段渲染组件

你可以通过嵌套解构或者直接访问嵌套对象属性的方式拿到songInfo里的字段，下面是两种可行的修改方案：

方案1：直接访问嵌套属性（可读性更高） #

修改render方法中map的取值逻辑，用可选链操作符?.做异常兜底，避免songInfo为空时页面报错：

render() {
    const tracklist = this.state.tracks;
    const tracks = tracklist.map(
        ({isrc, duration, explicit, songInfo}) =>
            <Track 
                key={isrc} 
                fullTitle={songInfo?.fullTitle} 
                isrc={isrc} 
                duration={duration} 
                explicit={explicit} 
                geniusUrl={songInfo?.geniusUrl} 
            />
    );
    return (
        <React.Fragment>
            <div className="border">
                <ul>
                    {tracks}
                </ul>
            </div>
        </React.Fragment>
    )
}

如果你的项目暂不支持可选链语法，可以改用短路运算兜底：

fullTitle={songInfo ? songInfo.fullTitle : ''}
geniusUrl={songInfo ? songInfo.geniusUrl : ''}

方案2：嵌套解构赋值 #

你也可以在解构参数的时候直接提取嵌套的songInfo字段，同时给空的songInfo设置默认空对象避免解构报错：

const tracks = tracklist.map(
    ({isrc, duration, explicit, songInfo: {fullTitle, geniusUrl} = {}}) =>
        <Track 
            key={isrc} 
            fullTitle={fullTitle} 
            isrc={isrc} 
            duration={duration} 
            explicit={explicit} 
            geniusUrl={geniusUrl} 
        />
);

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