我不知道为什么状态未定义？

Question

I am trying to make call to Unsplash API to return images based on location strings passed down from props.

When I console log this.state.props the response json object is there. But when I try to get the image urls off of state and use them as the source for an image, I keep getting an error that says "can't read property small of undefined".

Am I overlooking something?

import React, {Component} from 'react';
import Unsplash, {toJson} from 'unsplash-js';



const unsplash = new Unsplash({
  applicationId: {process.env.ID},
  secret: {process.env.SECRET},
  callbackUrl: {process.env.CALLBACK}
});


export default class Photos extends Component{
    constructor(props){
        super(props);

        this.state = {
            photo:[]
        }


        this.getPhotos = this.getPhotos.bind(this);
    }

    componentWillMount(){
        this.getPhotos();
      }

      getPhotos(){

          unsplash.search.photos(`${this.props.place}`,1,1)
          .then(toJson)
          .then(json => {
            this.setState({photo: json.results})
            console.log(this.state.photo)
          })


      }

      render(){

        return (
            <div>
                {

                 this.state.photo ? <img src = {this.state.photo.urls.small}/>:<div>loading</div>
                }

              </div>
              )
            }
}

Answer 1

this.state.photo is an array. An array does not have a property urls (therefore undefined ). Trying to access the property small of undefined will raise the error.

You will have to loop through your photos and render each image. Example

render() {
  [...]
  this.state.photo.map((singlePhoto) => (
    <img src={singlePhoto.urls.small} />
  ))
  [...]

Answer 2

Your state needs to have the nested value set to something in order for this to work.

For instance,you are using this.state.photo.urls.small but your state is only an empty array.

One way to fix this would be to set it to null if this.state.photo is not defined. Also you might want to use this.state.photo.map and a nested component instead of directly trying to access urls.

Example:

return (
    <div>
        this.state.photo.length ? this.state.photo.map(p => <div>
            <img src = {p.urls.small}/>
       </div>
       :<div>loading</div>
  </div>;

)

Answer 3

很简单，您可以检查array.length是否存在，而不是在该数组上使用map，并且每个图片都将在数组的回调中，因此可以在img标签中使用