Question

我正在尝试调用Unsplash API来根据从道具传递下来的位置字符串返回图像。

当我控制台登录this.state.props时，响应json对象就在那里。但是，当我尝试将图像网址从状态中移除并将其用作图像的来源时，我不断收到一条错误，指出＆＃34;无法读取未定义的属性＆＃34;。

我忽略了什么吗？

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是一个数组。数组没有属性urls（因此undefined）。尝试访问small的{{1}}属性会引发错误。

您必须循环浏览照片并渲染每张图片。实施例

undefined

Answer 2

您的州需要将嵌套值设置为某种值才能使其正常工作。

例如，您使用的是this.state.photo.urls.small，但您的状态只是一个空数组。

解决此问题的一种方法是，如果未定义this.state.photo，则将其设置为null。您也可以使用this.state.photo.map和嵌套组件，而不是直接尝试访问网址。

示例：

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，每个pic都将在数组的回调中，这样你就可以在img标签中使用

我无法弄清楚为什么国家未定义？

3 个答案: