Как напечатать объект реквизита в JSX, я получаю TypeError: Невозможно прочитать свойство undefined

Question

Я пытаюсь напечатать значение реквизита в моем JSX, хотя журналы показывают объект, когда я пытаюсь распечатать отдельные объекты, он выдает ошибку TypeError: Невозможно прочитать свойство <'objects'> неопределенного

Я использую REDUX, я пробовал зацикливание с использованием карты, forEach и т. д., но я получаю сообщение об ошибке.console.log ("props.stories") показывает объекты, но когда я пытаюсь зарегистрировать отдельные объекты, "props.stories" становится "undefined"

import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'

const ShowStory = (props) => {
    console.log(props.stories) // shows objects
    console.log(props.stories._id) // gives error and above log becomes undefined
    return(
        <div>
            <h1>{props.stories.bookTitle}</h1>
        </div>
    )
}

const mapStateToProps = (state, props) => {
    const id = props.match.params.id
    var arr1d = [].concat(...state.stories)
    return {
        stories: arr1d.find(story => story._id == id),
    }
}

export default connect(mapStateToProps)(ShowStory)

Answer 1

Если stories - это массив объектов, вам нужно получить к нему доступ с помощью функции .map, подобной этой.

Удалите эту строку, чтобы избавиться от ошибки консоли:

console.log(props.stories._id) // gives error and above log becomes undefined

Если вы хотите напечатать название всей книги, тогда:

<ul>
{props.stories.map((story, index) => (
                <li key={index}>{story.bookTitle}</li>
              ))}
</ul>

Если вы хотите напечатать название первого рассказа, тогда:

<div>
  <h1>{props.stories[0].bookTitle}</h1>
</div>