React Uncaught TypeError：無法讀取未定義的屬性[property_name]

我從父組件<CampersList _data={this.state.data}/>傳遞一個屬性，幫助我理解，應該如何獲取屬性_data[0].updated.$t。目前，它返回我一個錯誤：
這裏的子組件的代碼：React Uncaught TypeError：無法讀取未定義的屬性[property_name]

class CampersList extends React.Component { 
constructor(props) { 
    super(props); 
} 

render() { 
    let campersNodes = this.props._data.map((element, index) => { 
     return (
      <Camper user={element} index={index} key={index}/> 

     ); 
    }); 
    let updateDate = this.props._data[0].updated.$t; 
    return (
     <div> 
      <table> 
       <tbody> 
       {campersNodes} 
       </tbody> 
      </table> 
      <p>{updateDate}</p> 
     </div> 
    ) 
    } 
}

但是，如果我將減少let updateDate = this.props._data[0].updated.$t;到
let updateDate = this.props._data[0];則拋出了我不同的錯誤：

來源

2016-12-23 Taras Yaremkiv

檢查'this.props._data'是什麼。 – dfsq

@dfsq this.props._data是一個對象數組 –

可以顯示_data的一些示例數據？ – iamsaksham

此錯誤意味着數據[0]是未定義的。

簡而言之，反應需要幾毫秒來更新其道具，直到它們未定義。所以最初data[0] is undefined。

解決方案1：要解決此問題，請嘗試將它們置於if條件之內。

if(this.props._data[0]) { 
    //code 
}

解決方案2：使用getDefaultProps，這給默認的道具。此解決方案通過反應推薦

getDefaultProps() { 
    return { 
    _data: [] 
    }; 
}

來源

2016-12-23 11:51:02 iamsaksham

我已經添加了一些更多的信息給我的問題，也許它會清除問題 –

@TarasYaremkiv我對'this.props._data [0] .updated。$ t'要達到什麼感到困惑。你想訪問更新的數組，或者它有一些名稱更新的屬性？這個'$ t'是什麼，因爲據我所知，反應沒有像$這樣的東西來訪問變量/數組/對象 – iamsaksham

不，只要你將正確的道具傳遞給組件，這是不可能的。最可能的問題是''''。我無法獲得'$'在reactjs中做什麼 – iamsaksham

我們通常面臨這種問題的反應。原因是執行渲染方法時，數據可能無法提供給您，您必須通過某些網絡調用獲取數據。你可以使用一些條件語句，如：

let updateDate = this.props._data[0] ? this.props._data[0].updated.$t : null; 這將再次遇到麻煩，如果this.props._data[0].updated是不確定的。

因此，您將不得不再次嵌套來檢查變量是否已定義。

Lodash給你一些很酷的方法，如get來處理這種情況。簡單地使用：

let updateDate = _.get(this.props, '_data[0].updated.$t', 'Default Value');

來源

2016-12-23 11:46:08 Vikramaditya

我已經爲我的問題添加了更多信息，可能它會清除問題 –

由於'updateDate'是一個JavaScript對象，你不能直接渲染渲染方法中的整個對象。 – Vikramaditya

React Uncaught TypeError：無法讀取未定義的屬性[property_name]

回答

相關問題