Question

我正在尝试从 API 应用程序中的 react 获取数据。我有下面的组件ListApp

import React, {Component} from 'react';
import Card from './Card'

export default class ListApp extends Component{
    constructor(props){
        super(props);
        this.state = {
            items : [],
            isLoaded: false
        }
    }
    componentDidMount = () => {
        fetch('https://api.themoviedb.org/3/movie/550?api_key=my_api_key')
        .then(response => response.json())
        .then(response =>{
            this.setState({
                isLoaded: true,
                items: response.results
            })
            console.log(this.state.items)
        })
    }
    render(){
        var {isLoaded,items} = this.state;
        return(
           <div>
               {items.map(item => (<Card key={item.id} item={item} />))};
           </div> 
        )
    }
}

下面是我的 Card 组件：

import React,{Component} from 'react'

const Card = (props) => {
    const {items} = 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">{items.vote_average}</span>
                <h2 className="movie-container__title">{items.original_title}</h2>
                <p className="movie-container__date">{items.release_date}</p>
                <p className="movie-container__text">{items.overview}</p>
                <a href="https://www.themoviedb.org/movie/" className="movie-container__more">MORE</a>
            </div>
        </div>
    )
}

export default Card;

我收到错误 TypeError: Cannot read property 'map' of undefined。

我该如何解决？

Answer 1

response.results 可能为空，因此您需要检查 items 是否为空。

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

Answer 2

如果你从服务器上就没事

{
  results: [
    {
      vote_average: ...
      original_title: ...
      release_date: ...
      overview: ...
    }
    ,
  ]
}

或

{
  results: []
}

同时修复它（items 将是 item）：

import React,{Component} from 'react'

const Card = (props) => {
    const {item} = props;
    return(
        <div className="movie-container">
            <img src="https://image.tmdb.org/t/p/w185/{item.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;

Answer 3

条件？ true : false 如果我们想要渲染 Loading... text:

它在 JavaScript 中有效，因为 true && 表达式总是计算为表达式，而 false && 表达式总是计算为 false。

这就是它应该这样写的原因：-

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

Answer 4

那是因为您的 fetch (response.results) 的结果未定义，而您正在将其设置为状态。我认为处理这个问题的最好方法是改变：

this.setState({
   isLoaded: true,
   items: response.results
})

作者：

this.setState({
   isLoaded: true,
   items: response.results || []
})

类型错误：无法读取未定义错误的属性“地图”

4 个答案: