TypeError：无法读取未定义 React API 的属性“地图”答案

【问题标题】：TypeError: Cannot read property 'map' of undefined React APITypeError：无法读取未定义 React API 的属性“地图”
【发布时间】：2021-06-25 07:03:25
【问题描述】：

我正在尝试构建一个产品页面，其中包含产品列表，其详细信息从外部 API 获取并显示为卡片。我查看了如何做到这一点，发现这与我想做的类似，但我模仿了这篇文章中的代码React fetch api data to component，我收到一个错误TypeError: Cannot read property 'map' of undefined

产品组件

class Products extends Component {
    constructor(props){
        super(props);
        this.state = {
            items: [],
            isLoaded: false,
        }
    };
    componentDidMount = () => {
        fetch("https://api.themoviedb.org/3/movie/popular?api_key=xxxxxxxx&page=1")
        .then(resp => resp.json())
        .then(resp => {
            this.setState({
                isLoaded: true,
                items: resp.results
            })
            console.log(this.state.items)      
    })};

   
      render() {
        var {isLoaded, items} = this.state;
        
        return (
            <div>
                {items.map(item => (<Card key={item.id} item={item} />))};
            </div>
        );
    }
  
}

export default Products;

卡片组件

const Card = (props) => {
    const { item } = props;
    return (
        <div className="movie-container">
            <img src="https://image.tmdb.org/t/p/w185/{items.poster_path}" alt="NO PHOTO" className="movie-container__img" />
            <div className="movie-container__about">
                <span className="movie-container__percent">{item.vote_average}</span>
                <h2 className="movie-container__title">{item.original_title}</h2>
                <p className="movie-container__date">{item.release_date}</p>
                <p className="movie-container__text">{item.overview}</p>
                <a href="https://www.themoviedb.org/movie/" className="movie-container__more">MORE</a>
            </div>
        </div>
    )
}

export default Card;

【问题讨论】：

items 未定义，可能是因为 resp.results 未定义。
那我应该把这些项目设置成什么？

标签： javascript reactjs api fetch-api

【解决方案1】：

如果render() 执行，state.items 似乎可以为 null 或未定义，这很可能是您的 API 返回的结果，或者您如何处理它返回的结果。

“责备”API 的原因是因为您在构造函数中将items 初始化为[]，所以最初是一个数组，调用map 将起作用。

要解决此问题，请检查 items 是否有值；如果没有，则不显示任何内容。然后检查您是否正确访问 API，或许还可以深入研究 API 以查看它的作用并修复它。

检查 isLoaded 也很好，这样您就不会显示数据，除非 API 调用完成。

render() {
    var {isLoaded, items} = this.state;

    if (!isLoaded || !items)
        return null; // or if you like, show a "Waiting" indicator

    return (
        <div>
            {items.map(item => (<Card key={item.id} item={item} />))};
        </div>
    );
}

【讨论】：