javascript - 如何在反应钩子上的对象内 foreach/map 数组?
问题描述
我有一个来自这样的 API 的 json
"data": {
"total_question": 2,
"correct_answer": "1/2",
"correct_percentage": 50,
"details": [
{
"question_id": 1,
"question": "test questioner 1",
"choice": "choice 1.1",
"result": "correct",
"percentage_choice": 100
},
{
"question_id": 2,
"question": "test questioner 2",
"choice": "choise 2.3",
"result": "incorrect",
"percentage_choice": 100
}
]
}
然后我将API的响应输入到一个状态
const [data, setData] = useState({})
这是获取数据
const fetchResult = () => {
api.get(`api/questionnaire/getResult?voteId=${id}`)
.then(res => {
const { data: listResult } = res.data
setLoading(false)
setData(listResult)
})
.catch(err => console.log('error'))
}
useEffect(() => {
fetchResult()
}, [])
这是显示响应 API 的结果
<Card>
<Card.Body>
{Object.keys(data.details).map(item => {
return (
<Col key={item.question_id} xs={12} className='mb-3'>
<h5>{item.question}</h5>
<ProgressBar
variant='danger'
now={item.percentage_choice}
label={`${item.percentage_choice}%`}
/>
</Col>
)
})}
<Col xs={12}>
<h5>Total question: {data.total_question}</h5>
</Col>
</Card.Body>
</Card>
如何获取详细信息并映射它?我总是收到以下消息:TypeError: Cannot convert undefined or null to object
解决方案
您需要先检查您尝试访问的对象/数组是否有效,然后您可以直接map
通过数组(data.details)... 像这样:
{data.details && data.details.map(item => {
return (
<Col key={item.question_id} xs={12} className='mb-3'>
<h5>{item.question}</h5>
<ProgressBar
variant='danger'
now={item.percentage_choice}
label={`${item.percentage_choice}%`}
/>
</Col>
)
})}
推荐阅读
- javascript - 找到最大子数组的 Javascript 函数
- javascript - 检查函数回调中的重复
- pandas - 如何在 pandas DataFrame 的任何列中删除带有 NaN 的行
- python - 如果使用熊猫返回错误,如何删除数据
- python - Python:“StandardScaler”对象没有属性“_validate_data”
- javascript - 文本无法在 Bootstrap 导航栏切换中居中
- c++ - 模板类中静态成员的延迟初始化
- javascript - 如何提取帖子中提到的用户?(VUE-节点)
- java - Jenkins 中的 BUILD_LOG_EXCEPT
- git - 标签创建后推送标签