Проблема с отображением объекта массивов

Question

Я пытаюсь настроить блок кода для подготовки к setState, однако я сталкиваюсь с проблемой отображения списка в разделе рендера, так как reactjs говорит мне, что карта не является функцией. Я не думаю, что изначально настраиваю это правильно, и это должен быть массив объектов вместо массивов объектов.

Моя цель - создать список. Имена на левой стороне. Общая сумма ondinResult и cmfResult на правой стороне. Ниже приведен результат, который я должен ожидать:

Вот как поступают данные из API после вызова запроса GET:

"fileResults": {
    "incFiles": [
      {
        "assetManagerId": 5,
        "name": "BlackRock",
        "odinResult": {
          "total": 5,
          "success": 2,
          "error": 3
        },
        "cmfResult": {
          "total": 0,
          "success": 0,
          "error": 0
        }
      },
      {
        "assetManagerId": 8,
        "name": "Barings",
        "odinResult": {
          "total": 0,
          "success": 0,
          "error": 0
        },
        "cmfResult": {
          "total": 10,
          "success": 8,
          "error": 2
        }
      },
      {
        "assetManagerId": 11,
        "name": "AIM Derivatives",
        "odinResult": {
          "total": 6,
          "success": 4,
          "error": 2
        },
        "cmfResult": {
          "total": 0,
          "success": 0,
          "error": 0
        }
      },
      {
        "assetManagerId": 11,
        "name": "AIM Derivatives",
        "odinResult": {
          "total": 0,
          "success": 0,
          "error": 0
        },
        "cmfResult": {
          "total": 8,
          "success": 2,
          "error": 6
        }
      }
    ],
    "odinTotal": 11,
    "cmfTotal": 18
  },

Мой кодовый блок, который я сейчас устанавливаю перед setState:

//mapping odin and cmf results then adding the totals together    
let odinTotal = response.data.fileResults.incFiles.map(item => item.odinResult.total)
let cmfTotal = response.data.fileResults.incFiles.map(item => item.cmfResult.total)
const legendData = {
   labels: response.data.fileResults.incFiles.map(item => item.name),
   totals: odinTotal.map(function (num, idx) {
       return num + cmfTotal[idx]
   })
}

Мой результат таков из приведенного выше:

После деконструкции моего состояние, которое я пытался отобразить в недопустимом рендере, но получаю сообщение об ошибке: «Не удается прочитать свойство 'map' из неопределенного."

<ul>
  {legendData.labels.map(item => (
    <li key={item}>{item}</li>
  ))}
</ul>

Answer 1

Звучит так, как будто вы извлекаете некоторые данные при монтировании компонента, поэтому вам, вероятно, нужно предоставить какое-то начальное пустое значение массива для массива legendData labels.

state = {
  legendData: {
    labels: [],
    totals: [],
  },
}

Затем до тех пор, пока поскольку ваши логи загрузки данных c также возвращают и обновляют состояние с помощью массива, ваш логи рендеринга c будут работать.

Другой вариант заключается в использовании защитного шаблона в функции отображения для обеспечения свойства labels существует и имеет свойство длины.

<ul>
  {legendData && legendData.labels.length && legendData.labels.map(item => (
    <li key={item}>{item}</li>
  ))}
</ul>

Answer 2

У компонента реагирования, в котором вы используете карту, всегда должно быть начальное состояние для пустого массива или пустого объекта на основе требования.

проверьте условие:

{legendData && legendData.labels.length ?
 legendData.labels.map(item =>(
<li key={item}>{item}</li>
)) : null}