如何在JSX中打印道具對象，我收到TypeError：無法讀取未定義的屬性

Question

我試圖在JSX中打印props的值，即使當我嘗試打印單個對象時日志顯示該對象，它也會引發錯誤TypeError：無法讀取未定義的屬性<'objects'>

我正在使用REDUX，我嘗試使用map，forEach等進行循環。仍然出現錯誤。 console.log（“ props.stories”）顯示對象，但是當我嘗試記錄單個對象時，“ props.stories”變為“未定義”

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>