映射数组对象的问题答案

【问题标题】：Issue with mapping Object of Arrays映射数组对象的问题
【发布时间】：2023-03-17 20:39:01
【问题描述】：

我正在尝试设置一段代码来准备 setState，但是，我遇到了在渲染部分映射列表的问题，因为 reactjs 告诉我 map 不是函数。我认为我最初设置不正确，它应该是对象数组而不是对象数组。

我的目标是建立一个列表。左边的名字。右侧的 ondinResult 和 cmfResult 的总和。以下是我应该期待的结果：

这是调用 GET 请求后来自 API 的数据的样子：

"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>

【问题讨论】：

{legendData. && legendData.labels.map( ?... legendData 未定义或在第一次渲染时为空，在数据获取之前...为空然后没有 labels 内部
可以添加状态初始化代码

标签： javascript arrays json reactjs object

【解决方案1】：

听起来您在加载组件时正在获取一些数据，因此您可能需要为legendData 的labels 数组提供一些初始空数组值。

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

然后，只要您的数据加载逻辑也返回并使用数组更新状态，您的渲染逻辑就可以工作。

另一种选择是在映射函数上使用保护模式，以确保 labels 属性存在并具有长度属性。

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

【讨论】：

【解决方案2】：

使用 map 的反应组件应始终具有根据要求清空数组或空对象的初始状态。

检查条件：

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

【讨论】：