Javascript React redux-can'；t通过键从组件道具中的对象提取数据

我有一个反应成分。它通过reducer和

getQuestions

操作接收

问题

-对象数组。
还有

currentQuestionNumber

-一个整数，默认为零。
我的状态中有

问题

数组。我已将状态映射到道具。
在我的

render

方法中，我从道具中提取

questions

和

currentQuestionNumber

。
在我的

render

方法的

return

中，我可以执行

{console.log（questions[currentQuestionNumber]）}

-它按预期记录数组中的第一个对象（索引0）。 问题对象如下所示

{id:1，文本：“问题1”，选项：数组（4），更正：“1”}

但由于某些原因，我无法执行

{console.log（questions[currentQuestionNumber].text）}

-它返回一个错误

TypeError:无法读取未定义的属性“text”。
我如何修复它，为什么会发生这种情况

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";

import { getQuestions } from "../actions/questionActions";

class Question extends Component {
  componentDidMount() {
    this.props.getQuestions();
  }

  render() {
    let { questions, currentQuestionNumber } = this.props;
    return (
      <div>
        {console.log(questions[currentQuestionNumber])}
        {console.log(questions[currentQuestionNumber].text)}
      </div>
    );
  }
}

Question.propTypes = {
  questions: PropTypes.array.isRequired,
  getQuestions: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  questions: state.questions.questions,
  currentQuestionNumber: state.questions.currentQuestionNumber
});

export default connect(
  mapStateToProps,
  { getQuestions }
)(Question);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“道具类型”导入道具类型；
从“./actions/questionActions”导入{getQuestions}；
类问题扩展组件{
componentDidMount（）{
this.props.getQuestions（）；
}
render（）{
设{questions，currentQuestionNumber}=this.props；
返回(
{console.log（问题[currentQuestionNumber]）}
{console.log（问题[currentQuestionNumber].text）}
);
}
}
问题.propTypes={
问题：需要PropTypes.array.isRequired，
getQuestions:PropTypes.func.isRequired
};
常量mapStateToProps=状态=>({
问题：国家，问题，问题，
currentQuestionNumber:state.questions.currentQuestionNumber
});
导出默认连接(
MapStateTops，
{getQuestions}
)（问题）；
发生错误是因为getQuestions（）函数是异步的，并且在第一次渲染中没有任何
问题[currentQuestionNumber]
。那么它的
文本
在这里是未定义的。那么，为什么您可以console.log
questions[currentQuestionNumber]

您的问题状态可能是一个空数组：
[]
。在第一次渲染中，如果仔细观察，它应该记录
未定义的
，没有任何错误，因为有一个空数组。得到问题后，组件将被重新呈现，您将看到问题

但是，对于
.text
案例，这是不同的。当时没有任何问题，因此，当您想要获得一个不存在问题的文本时，react会触发此错误

对于这种情况，应该使用条件渲染

render() {
    let { questions, currentQuestionNumber } = this.props;
    return (
      <div>
        {questions.length && console.log(questions[currentQuestionNumber].text)}
      </div>
    );
  }

render（）{
设{questions，currentQuestionNumber}=this.props；
返回(
{questions.length&&console.log（questions[currentQuestionNumber].text）}
);
}
您是否正在跳出阵列的边界？您能否发布负责呈现单个
问题的代码？