将图像状态设置为 Flickr API 响应

Question

我正在开发 Flickr 克隆，当用户在输入中键入内容时，会发送一个 axios GET 请求来检索照片。我当前的路径返回未定义。对象的响应数组在哪里，所以我知道在哪里设置图像状态？谢谢！

搜索容器

import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import axios from 'axios';
class Search extends Component {
  state = {
    searchText: '',
    images: []
  }

  onTextChange = (e) => {
    this.setState({searchText: e.target.value}, () => {
      axios.get('https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=ea72b9024308d54ba48382706bebb960&user_id=156981303%40N08&format=json&api_sig=f8866cedaa88ceccdfe1e1cf06dcaded')
      .then(response => {
        this.setState({images: response.???});
      })
      .catch(error => {
        console.log(error)
      });
    });
  }

  render() {
    console.log(this.state.images);
    return (
      <div>
        <TextField 
        name="searchText"
        value={this.state.searchText}
        onChange={this.onTextChange}
        floatingLabelText="Search for photos"
        fullWidth={true} 
        />
      </div>
    );
  }
}

export default Search;

Answer 1

尝试将您的 onTextChange 方法修改为：

onTextChange = e => {
this.setState({ searchText: e.target.value }, () => {
  axios
    .get(
      `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=ea72b9024308d54ba48382706bebb960&tags=${this.state.searchText}&tag_mode=any&format=json&nojsoncallback=1`
    )
    .then(response => response.data)
    .then(response => this.setState({ images: response.photos.photo }))
    .catch(error => {
      console.log(error);
    });
  });
}

将图像状态设置为 Flickr API 响应

Set images state to Flickr API Response

flickr

reactjs

material-ui

axios