Reactjs 未捕获的TypeError-React中json对象的映射问题

我有一个react组件，它正在拉入用户数据，应该能够显示JSON对象中的一个值。但是，我得到了以下

未捕获类型错误：this.state.reasons.map不是一个函数

错误。我相信这是因为它需要一个数组和一个对象，但不太确定如何根据需要进行检查或转换。它应该能够映射对象并呈现

subscription.current\u period\u end的值

这是JSON对象：

{
  "displayName": "username",
  "email": "user@email.com",
  "entitled": true,
  "id": "23456789",
  "subscription": {
    "canceled_at": 1508519952,
    "current_period_end": 1524765490,
    "is_premium": true,
    "is_renewing": false,
    "plan_type": "Annual",
    "saved": true,
    "status": "Active"
  },
  "country": "us",
  "language": "en"
}

反应成分

class CancelConfirm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      reasons: []
    }
    this.processData = this.processData.bind(this)
  }

  componentDidMount() {
    this.fetchContent(this.processData)
  }


  fetchContent(cb) {
    superagent
      .get('/api/user')
      .then(cb)
  }


  processData(data) {
    this.setState({
      reasons: data.body
    })
  }

  render(props) {
    const content = this.props.config.contentStrings
    const reason = this.state.reasons.map((reason, i) => {
      return ( 
        <p key={i}>{reason.subscription.current_period_end}</p>
        )
    })
    console.log(reason)

    return ( 
    <div className = 'confirm' >
      <p className = 'confirm-subpara' >{reason}</p> 
    </div>
    )
  }
}

export default CancelConfirm

类取消响应组件{
建造师（道具）{
超级（道具）
此.state={
理由：[]
}
this.processData=this.processData.bind（this）
}
componentDidMount（）{
this.fetchContent（this.processData）
}
获取内容（cb）{
超级药剂
.get（'/api/user'）
.然后（cb）
}
processData（数据）{
这是我的国家({
理由：data.body
})
}
渲染（道具）{
const content=this.props.config.contentStrings
const reason=this.state.reasons.map（（原因，i）=>{
报税表（
{reason.subscription.current\u period\u end}
)
})
console.log（原因）
报税表（
{reason}
)
}
}
导出默认取消确认
您的
this.state.reasons
是来自JSON的响应对象，该对象没有映射函数，它仅用于迭代器值，如
new Array（）
，如果您试图显示您只需执行的操作的原因

目前我不知道您为什么在对象没有数组数据的情况下尝试对其进行迭代，也许我把您的问题搞错了，所以请指定您为什么使用
map
而不是简单的对象引用


var-API\u响应={
“正文”：{
“显示名称”：“用户名”，
“电子邮件”：user@email.com",
“标题”：正确，
“id”：“23456789”，
“认购”：{
“取消时间”：1508519952，
“本期末”：1524765490，
“is_premium”：正确，
“正在更新”：错误，
“计划类型”：“年度”，
“保存”：正确，
“状态”：“活动”
},
“国家”：“美国”，
“语言”：“en”
}
}
类CancelConfirm扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
理由：错
}
this.processData=this.processData.bind（this）
}
componentDidMount（）{
this.fetchContent（this.processData）
}
获取内容（cb）{
设置超时（（）=>{
cb（API_响应）
}, 2000)
}
processData（数据）{
这是我的国家({
理由：data.body
})
}
渲染（道具）{
如果（！this.state.reasons）返回（正在加载…）
const reason={this.state.reasons.subscription.current\u period\u end}

报税表（
{reason}
)
}
}
ReactDOM.render（，document.getElementById（'react'））

您不能在
对象上映射（）。因此，最好是这样做：

render(props) {
  const content = this.props.config.contentStrings
  const { reasons } = this.state;
  const keys = Object.keys(reasons);

  return (
    keys.map((k, i) => {
      return <p key={i}>{reasons[k].subscription.current_period_end}</p>
    })
  )
}

渲染（道具）{
const content=this.props.config.contentStrings
const{reasons}=this.state；
常量键=对象键（原因）；
返回(
keys.map（（k，i）=>{
return
{reasons[k].subscription.current\u period\u end}
})
)
}
这是由于
未捕获类型错误导致的错误：无法读取未定义的属性“current\u period\u end”
是否可以共享完整的JSON响应？因为您可能只共享了一个块，而不是完整的响应。Thanks@Matt我已经用运行的代码片段更新了我的答案，如果有帮助，请告诉我