React开发歌曲演示功能报listedSongs.map is not a function错误求助

React 函数组件仅接收一个入参：即所有属性组成的props对象。你当前的写法直接把整个props对象赋值给了listedSongs变量，该变量是对象类型而非你预期的数组，自然不存在map方法。
你观察到GetSongsRequest组件的map逻辑能正常运行，是因为该组件内的遍历用的是内部声明的songs状态，没有用到外部传入的listedSongs做遍历，该组件同样存在参数接收的错误，只是暂时没有触发报错，其内部点击事件绑定的addListedSongs方法当前是undefined状态，点击后也会触发报错。

修改两个子组件的参数接收逻辑，从props对象中解构出需要的属性即可，有两种写法可选：

1. 入参位置直接解构（更常用）

// 修改 GetSongsRequest 组件参数
function GetSongsRequest({ listedSongs, addListedSongs }) {
  // 原有逻辑保持不变
}

// 修改 SongsInList 组件参数
function SongsInList({ listedSongs }) {
  // 原有逻辑保持不变
}

2. 组件内部显式解构

function SongsInList(props) {
  const { listedSongs } = props
  // 原有逻辑保持不变
}

可以在调用数组方法前加可选链运算符做兜底，避免特殊场景下的报错：

{listedSongs?.map((el) => (
  <li key={el} className="tailwindCssStuff">
    {el[0]}
  </li>
))}

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