Question

我在获取JSON数据时遇到问题

我得到的错误是

  const list = this.state.images.map((image) =>

未处理的拒绝（TypeError）：this.state.images.map不是函数

这是data API link，您可以使用邮递员查看JSON数据

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

    this.state = {
      images: []
    };
   this.articlesList = this.articlesList.bind(this);
  }

  //Component Lifecycle
  //what do we put in here ?
  componentWillMount() {

    //after data is fetched
    fetch('http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=5500a486d12044849fe8ada1061c4d83&limit=5')
    .then(res => res.json()).then((data) => {
      // console.log('data', data)
      this.setState({images:data});

    })
  }

articlesList(){
  const list = this.state.images.map((image) =>
      <div className="col-md-6" key={image._id}>
         <Article url ={image.url}/>
      </div>
)

  return(list);
}

我尝试访问JSON文件中的 Images / Original / url

Answer 1

回复的回复如下：

{ 
  "data": [],
  "pagination": {},
  "metadata": {}
}

因此，您需要将images设置为JSON响应中的data属性。在以下代码段中，我将data变量更改为resp，然后访问data属性。

//after data is fetched    
fetch('http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=5500a486d12044849fe8ada1061c4d83&limit=5')
.then(res => res.json()).then((resp) => {

  // Here I changed 'data' to 'resp' and am accessing the data array.
  this.setState({images:resp.data});

})

在React JS中获取多数组中的JSON数据时出错？

1 个答案: