無法訪問JavaScript對象數組中的屬性（React）

Question

我有一個React組件，它從componentDidMount（）中的API調用中提取它的初始狀態數據。數據是一個對象數組。

我能夠使用JSON.stringify（用於調試）查看數組和單個元素，但是當我嘗試訪問元素中的某個屬性時，出現一個錯誤，這似乎暗示該元素是undef ，儘管我已經檢查過它不是。

代碼：

class TubeStatus extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 'tubedata' : [] }; 
    }; 
    componentWillMount() { 
    let component = this; 
    axios.get('https://api.tfl.gov.uk/line/mode/tube/status') 
    .then(function(response) { 
     component.setState({ 'tubedata' : response.data }); 
    }) 
    .catch(function(error) { 
     console.log(JSON.stringify(error, null, 2)); 
    }); 
    }; 
    render() { 
    return (
     <div><pre>{this.state.tubedata[0].id}</pre></div> 
    ); 
    } 
} 

錯誤：

Uncaught TypeError: Cannot read property 'id' of undefined 

如果使用JSON.stringify（）來顯示this.state.tubedata，所有的數據是存在的。

在我公認的有限的React知識中，我懷疑這是因爲React在componentDidMount（）觸發加載初始狀態數據之前試圖訪問.id屬性，因此返回undef，儘管我可能完全錯誤。

任何人都能指出我正確的方向嗎？

Answer 1

當您從API調用中獲取數據時，初始渲染數據不可用，因此您會收到錯誤消息。

this.state.tubedata.length>0// check if tubedata is available 

所以，

render() { 
    return (
     <div><pre>{this.state.tubedata.length>0?this.state.tubedata[0].id:null}</pre></div> 
    ); 
    } 

Answer 2

，這是因爲你有一個異步請求，因爲狀態陣列最初是空的this.state.tubedata[0]最初是未定義

使用ID喜歡

前請檢查

<div><pre>{this.state.tubedata.length > 0 && this.state.tubedata[0].id}</pre></div> 

class TubeStatus extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 'tubedata' : [] }; 
 
    }; 
 
    componentWillMount() { 
 
    let component = this; 
 
    
 
    }; 
 
    render() { 
 
    return (
 
     <div>Hello <pre>{this.state.tubedata.length > 0 && this.state.tubedata[0].id}</pre></div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<TubeStatus/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>