我试图使用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;而且我不太确定这意味着什么..
答案 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));