首頁(yè) 猿問(wèn) 為什么我無(wú)法訪問(wèn) state...

為什么我無(wú)法訪問(wèn) state 中的嵌套數(shù)據(jù)

JavaScript

富國(guó)滬深 2021-10-29 13:43:11

我正在嘗試訪問(wèn)存儲(chǔ)在 this.state.data 中的嵌套數(shù)組和對(duì)象。但我無(wú)法訪問(wèn)數(shù)組誰(shuí)能告訴我為什么？任何人都知道為什么錯(cuò)誤“無(wú)法讀取未定義的屬性'0'”不斷彈出。這個(gè)錯(cuò)誤讓我發(fā)狂。我不明白為什么這會(huì)不斷發(fā)生。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;

查看完整描述

3 回答

守候你守候我

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊

在初始渲染data過(guò)程中只是空字符串并嘗試訪問(wèn)hits[0]is undefine 實(shí)際上 this.state.data.hits 本身是未定義的，因此您可以在訪問(wèn)它之前首先進(jìn)行檢查，如下所示

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

反對(duì) 回復(fù) 2021-10-29

汪汪一只貓

TA貢獻(xiàn)1898條經(jīng)驗(yàn) 獲得超8個(gè)贊

問(wèn)題是您在 state 中的初始值是data: ''一個(gè)字符串值，它會(huì)在執(zhí)行時(shí)第一次渲染時(shí)拋出錯(cuò)誤this.state.data.hits[0]。

要解決此問(wèn)題，您可以將初始狀態(tài)更改為如下所示

this.state = {

input : '',

data: {

hits: []

,

isloading: true

}

建議：

您不需要綁定該方法，fetchData因?yàn)樗窃谕环秶鷥?nèi)調(diào)用的

如果您刪除此綁定，那么您甚至不需要構(gòu)造函數(shù)，您可以使用以下代碼替換整個(gè)構(gòu)造函數(shù)

state = {

input : '',

data: { hits: [] },

isloading: true

}

反對(duì) 回復(fù) 2021-10-29

RISEBY

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超5個(gè)贊

（請(qǐng)參閱下面有趣的評(píng)論，關(guān)于有條件地調(diào)用 console.log() 還是創(chuàng)建一個(gè)與您期望的數(shù)據(jù)結(jié)構(gòu)匹配的初始狀態(tài)更好。這段代碼確實(shí)有效，盡管有些人更喜歡不同的方法）。

render 方法在獲取數(shù)據(jù)之前運(yùn)行，因此此時(shí)您的數(shù)據(jù)等于一個(gè)空字符串。

您可以放置一個(gè)條件語(yǔ)句，以便它僅在數(shù)據(jù)存儲(chǔ)后執(zhí)行 console.log() ：

render(){

return(

<div>

{

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

}

</div>

);

}

如果沒(méi)有 this.state.data，代碼將不會(huì)經(jīng)過(guò)下一個(gè) && 操作符。但是您還需要檢查數(shù)據(jù)對(duì)象是否具有“hits”屬性，因此您為此編寫了另一個(gè) && 運(yùn)算符。Console.log() 不是“假的”，所以它會(huì)運(yùn)行。

反對(duì) 回復(fù) 2021-10-29