как выполнить foreach / map массив внутри объектов на крючках реакции? - PullRequest
1 голос
/ 14 июля 2020

У меня есть json от API, подобного этому

"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: невозможно преобразовать undefined или null в объект

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Похоже, data.details -> Object.keys(data.details) уже является массивом, и вам не нужно получать из него ключи. Попробуйте использовать карту напрямую data.details.map(....

1 голос
/ 14 июля 2020

вам нужно сначала проверить, является ли объект / массив, к которому вы пытаетесь получить доступ, действительным или нет, тогда вы можете напрямую 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>
  )
})}
...