为什么我无法访问状态的嵌套数据

时间:2019-09-25 19:11:23

标签: javascript reactjs

我正在尝试访问存储在this.state.data中的嵌套数组和对象。但是我无法访问阵列,谁能告诉我为什么?任何人都为什么会不断弹出错误“无法读取未定义的属性'0'”。这个错误使我发狂。我不明白为什么这种情况会持续下去。

import React from 'react';

const url="https://pixabay.com/api/?key=13565216-b3f251bf75153fd651dec947c&q=yellow+flowers&image_type=photo&pretty=true";

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      input : '',
      data: '',
      isloading: true
    }
    this.fetchData=this.fetchData.bind(this);
  }

  componentDidMount(){
    this.fetchData();
  }

  fetchData(){
    fetch(url)
    .then(res=>res.json())
    .then(result=>{
      this.setState({
        data:result,
        isloading: false
      })
    });
  }

  render(){
    return(
      <>
      {
        console.log(this.state.data.hits[0])
      }
      </>
    );
  }
}

export default App;

json数据在这里:

{
    "totalHits":500,
    "hits":[
        {
            "largeImageURL":"https://pixabay.com/get/55e0d340485aa814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":1008,
            "imageWidth":6000,
            "id":3063284,
            "user_id":1564471,
            "views":651677,
            "comments":226,
            "pageURL":"https://pixabay.com/photos/rose-flower-petal-floral-noble-3063284/",
            "imageHeight":4000,
            "webformatURL":"https://pixabay.com/get/55e0d340485aa814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"rose, flower, petal",
            "downloads":416283,
            "user":"annca",
            "favorites":873,
            "imageSize":3574625,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2015/11/27/06-58-54-609_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/01/05/16/24/rose-3063284_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e1d4404953a414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":788,
            "imageWidth":2736,
            "id":3113318,
            "user_id":7410713,
            "views":433603,
            "comments":123,
            "pageURL":"https://pixabay.com/photos/sunflower-nature-flora-flower-3113318/",
            "imageHeight":1824,
            "webformatURL":"https://pixabay.com/get/55e1d4404953a414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"sunflower, nature, flora",
            "downloads":318174,
            "user":"bichnguyenvo",
            "favorites":526,
            "imageSize":1026006,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2017/12/16/10-28-39-199_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/01/28/11/24/sunflower-3113318_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/54e2dc464e51a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":789,
            "imageWidth":5363,
            "id":2295434,
            "user_id":334088,
            "views":127443,
            "comments":60,
            "pageURL":"https://pixabay.com/photos/spring-bird-bird-tit-spring-blue-2295434/",
            "imageHeight":3575,
            "webformatURL":"https://pixabay.com/get/54e2dc464e51a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"spring bird, bird, tit",
            "downloads":56295,
            "user":"JillWellington",
            "favorites":880,
            "imageSize":2938651,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2018/06/27/01-23-02-27_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2017/05/08/13/15/spring-bird-2295434_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e2dc414351ae14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":400,
            "webformatWidth":640,
            "likes":733,
            "imageWidth":3200,
            "id":3292932,
            "user_id":2216431,
            "views":366876,
            "comments":65,
            "pageURL":"https://pixabay.com/photos/sunflower-vase-vintage-retro-wall-3292932/",
            "imageHeight":2000,
            "webformatURL":"https://pixabay.com/get/55e2dc414351ae14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":93,
            "tags":"sunflower, vase, vintage",
            "downloads":283271,
            "user":"Yuri_B",
            "favorites":946,
            "imageSize":2563708,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2018/01/15/10-52-15-382_250x250.png",
            "previewURL":"https://cdn.pixabay.com/photo/2018/04/05/14/09/sunflower-3292932_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/51e1d0464e52b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_1280.jpg",
            "webformatHeight":360,
            "webformatWidth":640,
            "likes":295,
            "imageWidth":3020,
            "id":715540,
            "user_id":916237,
            "views":96804,
            "comments":33,
            "pageURL":"https://pixabay.com/photos/yellow-natural-flower-blossom-715540/",
            "imageHeight":1703,
            "webformatURL":"https://pixabay.com/get/51e1d0464e52b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_640.jpg",
            "type":"photo",
            "previewHeight":84,
            "tags":"yellow, natural, flower",
            "downloads":48832,
            "user":"Wow_Pho",
            "favorites":309,
            "imageSize":974940,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2015/04/07/14-10-15-590_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2015/04/10/00/41/yellow-715540_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e5d4414253af14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":323,
            "webformatWidth":640,
            "likes":294,
            "imageWidth":3861,
            "id":1512813,
            "user_id":2364555,
            "views":82697,
            "comments":23,
            "pageURL":"https://pixabay.com/photos/lily-flowers-early-flower-garden-1512813/",
            "imageHeight":1952,
            "webformatURL":"https://pixabay.com/get/57e5d4414253af14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":75,
            "tags":"lily, flowers, early",
            "downloads":40483,
            "user":"pixel2013",
            "favorites":305,
            "imageSize":1037708,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/07/15/18-51-07-612_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2016/07/12/18/54/lily-1512813_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/54e1d1464f51a514f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":390,
            "webformatWidth":640,
            "likes":413,
            "imageWidth":4000,
            "id":2145539,
            "user_id":2364555,
            "views":53994,
            "comments":31,
            "pageURL":"https://pixabay.com/photos/crocus-flower-wet-spring-2145539/",
            "imageHeight":2443,
            "webformatURL":"https://pixabay.com/get/54e1d1464f51a514f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":91,
            "tags":"crocus, flower, wet",
            "downloads":31006,
            "user":"pixel2013",
            "favorites":388,
            "imageSize":823922,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/07/15/18-51-07-612_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2017/03/15/09/00/crocus-2145539_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e5d6454a5aa414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":419,
            "webformatWidth":640,
            "likes":296,
            "imageWidth":4896,
            "id":1536088,
            "user_id":1195798,
            "views":290456,
            "comments":57,
            "pageURL":"https://pixabay.com/photos/sunflower-flower-bloom-yellow-1536088/",
            "imageHeight":3208,
            "webformatURL":"https://pixabay.com/get/57e5d6454a5aa414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":98,
            "tags":"sunflower, flower, bloom",
            "downloads":51793,
            "user":"Couleur",
            "favorites":269,
            "imageSize":5103399,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/07/30/15-24-04-643_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2016/07/23/00/12/sun-flower-1536088_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e2d4464b5aa414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":358,
            "webformatWidth":640,
            "likes":375,
            "imageWidth":2027,
            "id":3215188,
            "user_id":7097598,
            "views":151068,
            "comments":98,
            "pageURL":"https://pixabay.com/photos/flowers-orange-orange-petals-3215188/",
            "imageHeight":1134,
            "webformatURL":"https://pixabay.com/get/55e2d4464b5aa414f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":83,
            "tags":"flowers, orange, orange petals",
            "downloads":103336,
            "user":"Candiix",
            "favorites":314,
            "imageSize":399066,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2017/12/06/20-08-45-84_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/03/10/20/26/flowers-3215188_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/51e2dc464b57b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_1280.jpg",
            "webformatHeight":416,
            "webformatWidth":640,
            "likes":334,
            "imageWidth":1980,
            "id":729515,
            "user_id":909086,
            "views":48785,
            "comments":21,
            "pageURL":"https://pixabay.com/photos/flower-beautiful-bloom-blooming-729515/",
            "imageHeight":1288,
            "webformatURL":"https://pixabay.com/get/51e2dc464b57b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_640.jpg",
            "type":"photo",
            "previewHeight":97,
            "tags":"flower, beautiful, bloom",
            "downloads":31414,
            "user":"Bessi",
            "favorites":429,
            "imageSize":370390,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/04/11/22-45-05-994_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729515_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/53e6d1424e4fad0bffd8992cc62b3278103ddfe34e50744f7c2b78dc9648c7_1280.jpg",
            "webformatHeight":428,
            "webformatWidth":640,
            "likes":538,
            "imageWidth":3872,
            "id":56414,
            "user_id":9003,
            "views":77521,
            "comments":82,
            "pageURL":"https://pixabay.com/photos/anemone-flower-blossom-bloom-blue-56414/",
            "imageHeight":2592,
            "webformatURL":"https://pixabay.com/get/53e6d1424e4fad0bffd8992cc62b3278103ddfe34e50744f7c2b78dc9648c7_640.jpg",
            "type":"photo",
            "previewHeight":100,
            "tags":"anemone, flower, blossom",
            "downloads":32632,
            "user":"Albenheim",
            "favorites":458,
            "imageSize":770723,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2012/09/08/21-14-56-990_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2012/09/08/21/51/anemone-56414_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e1d7444b55a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":448,
            "imageWidth":4752,
            "id":1127174,
            "user_id":1445608,
            "views":132295,
            "comments":31,
            "pageURL":"https://pixabay.com/photos/sunflower-summer-yellow-nature-1127174/",
            "imageHeight":3168,
            "webformatURL":"https://pixabay.com/get/57e1d7444b55a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"sunflower, summer, yellow",
            "downloads":78186,
            "user":"mploscar",
            "favorites":469,
            "imageSize":3922163,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2016/01/05/14-08-20-943_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2016/01/08/05/24/sunflower-1127174_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e1d6444957b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_1280.jpg",
            "webformatHeight":355,
            "webformatWidth":640,
            "likes":208,
            "imageWidth":2410,
            "id":113735,
            "user_id":817,
            "views":102849,
            "comments":31,
            "pageURL":"https://pixabay.com/photos/rose-flower-yellow-yellow-rose-113735/",
            "imageHeight":1337,
            "webformatURL":"https://pixabay.com/get/57e1d6444957b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_640.jpg",
            "type":"photo",
            "previewHeight":83,
            "tags":"rose, flower, yellow",
            "downloads":19187,
            "user":"blizniak",
            "favorites":193,
            "imageSize":299425,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2013/06/28/17-07-05-714_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2013/05/26/12/14/rose-113735_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e9d2414e53ad14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":372,
            "webformatWidth":640,
            "likes":285,
            "imageWidth":4288,
            "id":1972411,
            "user_id":1777190,
            "views":93782,
            "comments":35,
            "pageURL":"https://pixabay.com/photos/drip-blossom-bloom-yellow-1972411/",
            "imageHeight":2499,
            "webformatURL":"https://pixabay.com/get/57e9d2414e53ad14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":87,
            "tags":"drip, blossom, bloom",
            "downloads":78762,
            "user":"susannp4",
            "favorites":285,
            "imageSize":1510459,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2015/12/16/17-56-55-832_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2017/01/11/17/27/drip-1972411_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/5ee8d2474e51b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_1280.jpg",
            "webformatHeight":497,
            "webformatWidth":640,
            "likes":429,
            "imageWidth":3867,
            "id":887443,
            "user_id":1298145,
            "views":82485,
            "comments":49,
            "pageURL":"https://pixabay.com/photos/flower-life-crack-desert-drought-887443/",
            "imageHeight":3005,
            "webformatURL":"https://pixabay.com/get/5ee8d2474e51b108f5d084609629347b133adce4554c704c73267fd79f4cc05a_640.jpg",
            "type":"photo",
            "previewHeight":116,
            "tags":"flower, life, crack",
            "downloads":41067,
            "user":"klimkin",
            "favorites":351,
            "imageSize":2611531,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2017/07/18/13-46-18-393_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2015/08/13/20/06/flower-887443_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e7d743495aaf14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":186,
            "imageWidth":6000,
            "id":3720383,
            "user_id":6246704,
            "views":59481,
            "comments":42,
            "pageURL":"https://pixabay.com/photos/flower-g%C3%A9rbel-yellow-flower-flower-3720383/",
            "imageHeight":4000,
            "webformatURL":"https://pixabay.com/get/55e7d743495aaf14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"flower g\u00e9rbel, yellow flower, flower",
            "downloads":48052,
            "user":"fernandozhiminaicela",
            "favorites":160,
            "imageSize":2117262,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/02/27/14-16-13-192_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/10/03/03/42/flower-gerbel-3720383_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e6d1434351a914f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":339,
            "imageWidth":5574,
            "id":3640935,
            "user_id":334088,
            "views":176477,
            "comments":63,
            "pageURL":"https://pixabay.com/photos/sunflowers-field-woman-yellow-3640935/",
            "imageHeight":3717,
            "webformatURL":"https://pixabay.com/get/55e6d1434351a914f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"sunflowers, field, woman",
            "downloads":145783,
            "user":"JillWellington",
            "favorites":308,
            "imageSize":4970597,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2018/06/27/01-23-02-27_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/08/29/22/52/sunflowers-3640935_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e6d7444b5baf14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":285,
            "imageWidth":6000,
            "id":1627193,
            "user_id":1834854,
            "views":111905,
            "comments":42,
            "pageURL":"https://pixabay.com/photos/sunflower-sunflower-field-yellow-1627193/",
            "imageHeight":4000,
            "webformatURL":"https://pixabay.com/get/57e6d7444b5baf14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"sunflower, sunflower field, yellow",
            "downloads":33145,
            "user":"ulleo",
            "favorites":335,
            "imageSize":5414839,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/05/16/18-48-21-135_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2016/08/28/23/24/sunflower-1627193_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/55e5d1434854aa14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":437,
            "webformatWidth":640,
            "likes":247,
            "imageWidth":5500,
            "id":3540266,
            "user_id":2364555,
            "views":85177,
            "comments":37,
            "pageURL":"https://pixabay.com/photos/sunflower-flower-blossom-bloom-3540266/",
            "imageHeight":3760,
            "webformatURL":"https://pixabay.com/get/55e5d1434854aa14f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":102,
            "tags":"sunflower, flower, blossom",
            "downloads":74877,
            "user":"pixel2013",
            "favorites":249,
            "imageSize":4179978,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/07/15/18-51-07-612_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2018/07/15/19/02/sun-flower-3540266_150.jpg"
        },
        {
            "largeImageURL":"https://pixabay.com/get/57e3d44a4b53a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_1280.jpg",
            "webformatHeight":426,
            "webformatWidth":640,
            "likes":288,
            "imageWidth":4272,
            "id":1319114,
            "user_id":485024,
            "views":99904,
            "comments":25,
            "pageURL":"https://pixabay.com/photos/girl-flowers-yellow-beauty-nature-1319114/",
            "imageHeight":2848,
            "webformatURL":"https://pixabay.com/get/57e3d44a4b53a814f6da8c7dda79367d1039dbe752576c48702972d09445c45dba_640.jpg",
            "type":"photo",
            "previewHeight":99,
            "tags":"girl, flowers, yellow",
            "downloads":48347,
            "user":"AdinaVoicu",
            "favorites":292,
            "imageSize":3837334,
            "previewWidth":150,
            "userImageURL":"https://cdn.pixabay.com/user/2019/07/18/16-54-09-399_250x250.jpg",
            "previewURL":"https://cdn.pixabay.com/photo/2016/04/09/23/10/girl-1319114_150.jpg"
        }
    ],
    "total":21247
}

5 个答案:

答案 0 :(得分:2)

问题在于您处于状态的初始值为data: '',这是一个字符串值,在执行this.state.data.hits[0]的首次渲染期间会引发错误。

要解决此问题,您可以将初始状态更改为如下所示

    this.state = {
      input : '',
      data: {
        hits: []
      ,
      isloading: true
    }

建议:

  • 您无需绑定方法fetchData,因为它是在同一作用域中调用的

如果删除此绑定,则甚至不需要构造函数,并且可以用以下代码替换整个构造函数

    state = {
      input : '',
      data: { hits: [] },
      isloading: true
    }

答案 1 :(得分:1)

在Innitial渲染期间,data只是一个空字符串,而尝试访问hits[0]则是未定义的,事实上this.state.data.hits本身是未定义的,因此您可以在访问之前首先进行检查类似于以下

console.log( this.state.data.hits && this.state.data.hits[0]) 

答案 2 :(得分:1)

(关于有条件调用console.log()还是创建与您期望的数据结构匹配的初始状态是更好的方法,请参见以下有趣的评论。此代码确实有效,尽管有些人喜欢一种不同的方法)。

render方法在获取数据之前就已运行,因此此时您的数据等于空字符串。

您可以放置​​条件语句,以便仅在存储数据后才执行console.log():

render(){
   return(
      <div>
       {
          this.state.data && this.state.data.hits &&  console.log(this.state.data.hits[0])
        }
      </div>
);

}

如果没有this.state.data,则代码不会超出下一个&&运算符。但是,您还需要检查数据对象是否具有“ hits”属性,因此您需要为此编写另一个&&运算符。 Console.log()并非“虚假”,因此它将运行。

答案 3 :(得分:0)

this.fetchData()是异步的,这意味着发送请求(或接收响应)已从正常执行流程中删除。 因此,render()函数会在数据接收之前调用。

解决方案

检查this.state.data或this.state.data.hits是否为空。

{this.state.data.hits && console.log(this.state.data.hits[0])}

答案 4 :(得分:0)

indside构造函数,您已将数据定义为字符串并分配了对象数组。 零钱:data: '' to data: []