无法读取属性' setState'未定义的

时间:2016-11-27 09:32:42

标签: javascript reactjs flickr

我试图使用flickr api来获取公共照片并使用它们创建图像轮播,但似乎它不想在开始时获取照片。由于我是React的新手,很难弄清楚我在这里做错了什么,所以任何有用的帮助都会受到赞赏..谢谢。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import _ from 'lodash';

import Button from './components/button';

const urlArr = [];
const apiKey = "YOUR_API";
const userId = "YOUR_ID";
const url = `https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=${apiKey}&user_id=${userId}&format=json&nojsoncallback=1`;


class App extends Component {
  constructor(props) {
    super(props);

    this.state = { urlArr: [] };

    axios.get(url)
    .then(function(photoData) {
      _.forEach(photoData.data.photos.photo, (photo) => {
        // this.setState({ urlArr: `https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg` });
        urlArr.push(`https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg`);
      });
      this.setState({ urlArr });
    });
  }

  render() {
    return (
      <div>
        <Button />
      </div>
    );
  }
};

ReactDOM.render(<App/>, document.querySelector('.container'));

上面的代码返回&#39; TypeError:无法读取属性&#39; setState&#39;未定义的&#39;而且我不太确定这意味着什么..

1 个答案:

答案 0 :(得分:4)

您正在 Promise 的回调函数中调用 setState()

错误是因为 this 不是React Component。

您应该使用箭头函数或将React Component实例绑定到回调函数。

例如:

axios.get(url)
.then((photoData) => {
  _.forEach(photoData.data.photos.photo, (photo) => {
    // this.setState({ urlArr: `https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg` });
    urlArr.push(`https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg`);
  });
  this.setState({ urlArr });
});

或者:

axios.get(url)
.then(function(photoData) {
  _.forEach(photoData.data.photos.photo, (photo) => {
    // this.setState({ urlArr: `https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg` });
    urlArr.push(`https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg`);
  });
  this.setState({ urlArr });
}.bind(this));