我正在尝试访问存储在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
}
答案 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)
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: []