API에서 호출 된 React의 개별 배열 요소에 액세스

Question

React와 Redux를 사용하여 Webapp를 작성하고 있습니다. XMLHttpRequest를 사용하여 REST API의 데이터 (배열 형식)로 내 감속기를 채우는 Redux 작업이 있습니다. React 문서에서 말하는 것이 최상이기 때문에 componentDidMount에서 액션을 호출합니다. 내 렌더링 기능에서 액세스하려고하면 "배열 [0]은 콘솔에서 정의되지 않은 메시지입니다." 그러나 재밌는 점은 array.map()을 사용하여 JSX를 반환하는 함수를 정의하면 잘 작동한다는 것입니다. 단지 개별적으로 액세스하지 못하게합니다. 왜 그 사람이 누군지 압니까?

코드 :

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> 
      ); 
     } 

이 코드를 테스트하지 않았다. 그러나 이것은 효과가있다.