Question

我有一个像这样的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：无法将未定义或null转换为对象

Answer 1

您需要先检查您要访问的对象/数组是否有效，然后您可以直接在数组上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>
  )
})}

Answer 2

看起来像data.details-> Object.keys(data.details)已经是数组，您不需要从中获取键。尝试直接使用地图data.details.map(...。

如何在反应钩子上的对象内部foreach / map数组？

2 个答案: