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

Question

我正在尝试使用 flickr api 获取公共(public)照片并用它们创建图像轮播，但似乎一开始就不想获取照片。由于我是 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'));

上面的代码返回“TypeError:无法读取未定义的属性“setState””，我不太确定这意味着什么。

Answer 1

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

错误是因为 this 不是 React 组件。

您应该使用箭头函数或将 React 组件实例绑定(bind)到回调函数。

例如:

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));