React项目props初始正常但二次渲染后变为undefined的问题排查

props二次渲染为undefined的核心原因 #

你观察到的TrackList组件两次渲染、第二次props为undefined的现象，并不是同一个组件实例更新后props丢失，而是项目中存在两个独立的TrackList组件实例，各自在初始化阶段触发了constructor的日志打印：

• 第一个实例是SearchResults组件内部引用的TrackList：这里从SearchResults拿到了从App层传递下来的searchResults数组作为tracks prop，日志输出的数据完全符合预期。
• 第二个实例是App层并列渲染的Playlist组件内部引用的TrackList：按照该项目的常规结构，Playlist组件同样需要调用TrackList渲染已添加的播放列表曲目，但你目前还没有给这个位置的TrackList传递对应的tracks属性，导致这个实例拿到的props中根本不存在tracks字段，直接触发undefined.map()的报错。

代码本身存在的语法逻辑问题 #

哪怕所有父组件都正确传递了tracks prop，当前TrackList中的遍历逻辑也无法正常渲染内容：
你在map的回调函数中使用了大括号包裹函数体，但没有通过return关键字返回Track组件元素，这种写法会让map遍历的结果全部为undefined，页面不会渲染任何搜索结果条目。

具体修复步骤 #

1. 修正TrackList中的遍历返回逻辑
   两种写法二选一即可：
   • 把箭头函数的大括号替换为小括号，实现隐式返回JSX
   • 保留大括号的函数体结构，在内部显式写入return返回Track元素
     修正后的代码参考：

   render() {
     return (
       <div className="TrackList">
         {this.props.tracks.map(track => (
           <Track 
             key={track.id}
             name={track.name}
             artist={track.artist}
             album={track.album}  
           />
         ))}
       </div>
     )
   }
   

   这里补充给每个Track传递key属性（使用track自带的id字段），可以消除React列表渲染的性能警告。
2. 增加props兜底逻辑避免崩溃
   在执行map遍历前，给tracks属性增加默认空数组兜底，不管父组件有没有正确传值，都不会触发undefined.map()的报错：

   // 渲染时先判断tracks是否存在，不存在就替换为空数组
   {(this.props.tracks || []).map(track => ...)}
   

3. 补全Playlist组件的传值逻辑
   后续实现Playlist播放列表渲染功能时，按照SearchResults的传参逻辑，给Playlist内部的TrackList组件传递对应的曲目数组即可，不会再影响现有搜索结果的渲染。

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