APIから呼び出されたReactの個々の配列要素へのアクセス

Question

ReactとReduxを使用してWebアプリケーションを作成しています。 XMLHttpRequestを使用してREST APIからデータを配列形式で取り込むReduxアクションがあります。私はcomponentDidMountでアクションを呼び出します。なぜなら、Reactのドキュメンテーションが言っていることが一番良いからです。レンダリング機能でそれらにアクセスしようとすると、「配列[0]はコンソールに未定義のメッセージです」というメッセージが表示されます。しかし、面白いのは、JSXをarray.map（）を使って返す関数を定義してもうまくいくかどうかです。それだけで私はそれらを個別にアクセスさせません。なぜ誰がそれが分かっていますか？

コード：

import React from 'react' 
import {connect} from 'react-redux' 
import {bindActionCreators} from 'redux' 
import {Row, Col, Grid} from 'react-bootstrap' 
import {fetchData} from '../actions' 

class DataContainer extends React.Component { 

    listData(array){ 
    return array.map((element) => { 
     return(
     <Col lg = {3} md = {4} sm = {6} key = {element.id}> 
      <h3>{element.name}</h3> 
      <p>{element.description}</p> 
     </Col> 
    ); 
    }); 
    } 

    componentDidMount(){ 
    this.props.getData() //call API 
    } 

    render() { 
     return(
     <Grid> 
      <Row componentClass = "section" id = "non-profits"> 
      {listData(props.data)} //this works 
      {props.data[0].name} //this doesn't work 
      </Row> 
     </Grid> 
    ); 

    } 
} 

function mapStateToProps(state){ 
    return{ //maps reducer state to props for use in component 
    data: state.data //state.data stores the data from the REST API 
    }; 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({getdata: fetchdata}, dispatch)//fetchData is the redux action that 
                  //calls the REST API 

} 

export default connect(mapStateToProps, mapDispatchToProps)(DataContainer); 

Answer 1

はこれを試してみてください：

render() { 
      return(
      <Grid> 
       <Row componentClass = "section" id = "non-profits"> 
        {(props && props.data && props.data.length > 0)} ? {props.data[0].name} : <span>None</span> //This should work 
       </Row> 
      </Grid> 
      ); 
     } 

私はこのコードをテストしていません。しかし、これはうまくいくはずです。