在 React/Redux 应用程序中，为什么我的子组件中的 props.property 在控制台日志中显示未定义

Question

I have built a Flashcard app and decided to implement Redux. On componentMount() it is running a getRandomCard action which sets the state of the randomCard. My redux state shows the correct state of the random card which changes randomly with each refresh however when I pass the props to a child card component to display the question, answer and graphic the props.randomCard.question etc shows as undefined.I don't know why. Here is the code for my reducer.

 import CARD_DATA from '../components/card.data'

const INITIAL_STATE = {
  cards: CARD_DATA,
  randomCard: {},
  seenCard: [],
  endOfDeck: false
}

const cardReducer = function cards(state = INITIAL_STATE, action) {

  switch (action.type) {
    case 'GET_RANDOM_CARD': 
      return {
        ...state,
        randomCard: [action.currentCards[Math.floor((Math.random() * action.currentCards.length))]]
      }

    default: return state
  }
}


export default cardReducer

Here is the action:

export function getRandomCard(currentCards) {
  return {
    type: 'GET_RANDOM_CARD',
    currentCards: currentCards,
  }
}
enter code here
enter code here

Here is the parent componentDidMount method:

class App extends Component {

  componentDidMount() {
    const {getRandomCard, cardData} = this.props
    getRandomCard(cardData)
  }

And here is the child component which is trying to render the props:

return (
      <div className="card-container">
        <div className="card">
          <div className="front">
            <div className="question">{props.randomCard.question}</div>
            <div className="image">
              <img src={props.randomCard.imageUrl} alt='graphic not available' />
            </div>
          </div>
          <div className="back">
            <div className="answer">{props.randomCard.answer}</div>
          </div>
        </div>
      </div>
    )

}

export default Card

Props.randomCard console.logs this:

0: {id: 3, question: "What is immutablity?", answer: "When an object or an array does not get mutated when being passed to a function", imageLink: "https://miro.medium.com/max/600/1*2N0l3bLqaBgmOSIay-uc5w.png", priority: 5}
length: 1
__proto__: Array(0)

I have tried accessing these props using props.randomCard.question and props.randomCard[0].question all to no avail and I am blocked.

Answer 1

I have figured out why I was getting props.randomCard[0].question undefined. The component was rendering before it received the props.

I fixed issue by adding the following conditional statement:

render () {
  if (this.props.card[0]) {
  return (
  <div className="card-container">
    <div className="card">
      <div className="front">
        <div className="question">{this.props.card[0].question}</div>
        <div className="image">
          <img src={this.props.card[0].imageLink} alt='graphic not available' />
        </div>
      </div>
      <div className="back">
        <div className="answer">{this.props.card[0].answer}</div>
      </div>
    </div>
  </div>
)

} else {
  return null
}
}

}