reactjs - 访问从 API 调用的 React 中的单个数组元素

Question

我正在使用 React 和 Redux 编写一个网络应用程序。我有一个 Redux 操作，它使用 XMLHttpRequest 用来自 REST API 的数据(数组格式)填充我的 reducer。我在 componentDidMount 中调用该操作，因为这就是 React 文档所说的最好的。当我尝试在渲染函数中访问它们时，我收到“控制台中的数组 [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>
           );
      }

我没有测试这段代码。但这应该有效。