Uncaught TypeError - отображение проблемы с объектом json в React
У меня есть компонент реакции, который извлекает пользовательские данные и должен иметь возможность отображать одно из значений из объекта JSON. Однако я получаю следующую ошибку Uncaught TypeError: this.state.reasons.map is not a function. Я считаю, что это потому, что он ожидает массив против объекта, но не совсем уверен, как проверить или преобразовать при необходимости. Он должен иметь возможность отображать объект и отображать значение subscription.current_period_end.
Это объект JSON:
{
"displayName": "username",
"email": "[email protected]",
"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"
}
Компонент React
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.info(reason)
return (
<div className = 'confirm' >
<p className = 'confirm-subpara' >{reason}</p>
</div>
)
}
}
export default CancelConfirm
Ответы 2
Ваш this.state.reasons является объектом ответа из JSON, объект не имеет функции карты, это только для значений итератора, таких как new Array(), если вы пытаетесь показать причину, по которой вы бы просто сделали
В настоящее время я не знаю, почему вы пытаетесь перебрать объект, когда у него нет данных массива, возможно, я неправильно понял ваш вопрос, поэтому, пожалуйста, укажите, почему вы вообще сделали map вместо простой ссылки на объект.
var API_RESPONSE = {
"body": {
"displayName": "username",
"email": "[email protected]",
"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: false
}
this.processData = this.processData.bind(this)
}
componentDidMount() {
this.fetchContent(this.processData)
}
fetchContent(cb) {
setTimeout(() => {
cb(API_RESPONSE)
}, 2000)
}
processData(data) {
this.setState({
reasons: data.body
})
}
render(props) {
if (!this.state.reasons) return (<i>Loading ....</i>)
const reason = <p>{this.state.reasons.subscription.current_period_end}</p>
return (
<div className = 'confirm' >
<p className = 'confirm-subpara' >{reason}</p>
</div>
)
}
}
ReactDOM.render(<CancelConfirm />, document.getElementById('react'))<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "react"></div>не могли бы вы поделиться полным ответом в формате JSON? поскольку, вероятно, вы разделили только кусок, а не полный ответ. Спасибо
@Matt Я обновил свой ответ с помощью запущенного фрагмента, пожалуйста, дайте мне знать, поможет ли это
Вы не можете map() вместо Object. Таким образом, было бы лучше сделать что-то вроде этого:
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>
})
)
}
Это ошибка с
Uncaught TypeError: Cannot read property 'current_period_end' of undefined