使用React的新功能：TypeError：无法读取未定义的属性“ map”

Question

我是React的新手，我按照一个教程学习，但遇到错误，但无法弄清楚。我正在尝试从API获取一些数据，以将其显示在我的项目中。

这是我的代码：

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

class App extends Component {
  constructor() {
    super();
      this.state = {
        photos: []
    }
  }

  componentWillMount() {  
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then((response) => {return response.json()})
      .then((photos) => {this.setState({ photos: photos })})
  }
  render() {  
    if (this.state.photos.length > 0) {
      return (
        <div className="container-fluid">
          <PhotoList listado={this.state.photos} />
        </div>
      )
    } else {
      return <span>Esperando photos</span>
    }
  }
}

export default App;





import React from 'react';
import Photo from './Photo';

const PhotoList = ({ Photos  }) => { 
    return (
        <div>   
            {
                Photos.map((Photos, i) => {    
                    return (
                        <div>                        
                            key={i}
                            id={Photos[i].id} 
                            title={Photos[i].title} 
                            url={Photos[i].url} 
                        </div>                          
                    );
                })
            }
        </div>
    );

}




export default PhotoList; 

我收到此错误：

Error

非常感谢您

Answer 1

有几点要指出。

您可以在
上跟随

1。传递给PhotoList的道具名称不匹配。

在App内，您可以使用listado属性将照片传递到PhotoList。

<PhotoList listado={this.state.photos} />

但是您正在尝试检索不存在的Photos属性。

const PhotoList = ({ Photos  }) => { 

因此您应该将属性名称更改为Photos（首选小写）

<PhotoList Photos={this.state.photos} />

或更改PhotoList的声明

const PhotoList = ({ listado }) => { 

2。与回调参数名称冲突

Photos.map((Photos, i) => {   

应该是

Photos.map((photo, i) => {  

或Photos以外的任何其他ID。

3。无需使用数组索引访问.map中的元素

而不是

Photos.map((Photos, i) => {    
    return (
        <div>                        
            key={i}
            id={Photos[i].id} 
            title={Photos[i].title} 
            url={Photos[i].url} 
        </div>                          
    );
})

您应该

photos.map((photo, i) => {
    return (
    <div>
        <p>key={i}</p>
        <p>id={photo.id}</p>
        <p>title={photo.title}</p>
        <p>url={photo.url}</p>
        </div>
    );
})

您会看到photo是一个单独的照片对象，因此无需使用Photos[i]对其进行访问。