React调用props.map()提示'map is not a function'报错排查

React函数组件的入参是封装了所有传入属性的props对象，不是你直接传入的单个属性值。你的代码中两层组件都没有正确从props对象中取出目标数组，直接对props对象调用map方法，自然会报is not a function错误。

具体错误点 #

• SearchResults组件：App传入属性为searchResults={数组}，但你直接将组件入参命名为searchResults，此时拿到的是完整props对象，结构为{ searchResults: 目标数组 }，不是数组本身。
• TrackList组件：SearchResults传入属性为tracks={值}，你同样直接将入参命名为tracks，拿到的也是完整props对象，加上上一层传值错误，最终拿到的值完全不是目标数组。

修复代码 #

1. 修复SearchResults组件 #

从props中解构出真正的searchResults数组再传递：

import React from "react";
import TrackList from "../Tracklist/TrackList";
import './SearchResults.scss';

const SearchResults = ({ searchResults }) => {
    return(
        <div className="SearchResults">
            <h2>Results</h2>
            <TrackList tracks={searchResults}/>
        </div>
    )
}

export default SearchResults;

2. 修复TrackList组件 #

从props中解构出真正的tracks数组再调用map：

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

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

export default TrackList;

可选优化（防御性编程） #

如果存在数据异步加载、初始值为空的场景，可以加兜底逻辑避免渲染报错：

// 可选链写法，tracks为undefined/null时不会执行map
{tracks?.map((track) => <Track track={track} key={track.id}/>)}

// 或者显式判断数组类型
{Array.isArray(tracks) && tracks.map((track) => <Track track={track} key={track.id}/>)}

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