如何在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>