在数组中映射嵌套数据对象答案

【问题标题】：Mapping nested data object within an array在数组中映射嵌套数据对象
【发布时间】：2021-12-11 22:09:21
【问题描述】：

我有以下来自 JSON 的数据，需要在我的应用程序前端呈现：

Redux Slice 中的 JSON

{
    "documentGenerated": [
        {
            "documents": 
                {
                    "documentName": "string",
                    "documentStoreId": {{faker 'random.number'}},
                    "documentTitle": "string"
                }
            ,
            "groupName": "string",
            "groupId": {{faker 'random.number'}}
        }
    ],
}

我的控制台日志从我导入到组件中的 redux 切片正确返回数据，但是，当我尝试映射数据时，它返回以下错误：

错误

TypeError: e.documents.map is not a function at line 63

对应组件中的这行代码：

docGenerated.documents.map((document, documentStoreId) => (

最后，这是我在组件内映射数据的方式：

组件

 const documentGenerated = useSelector(selectDocumentGenerated);

 <Card
                type="default"
                title={(
                  <div>
                    {documentGenerated.map((docGenerated) =>
                      docGenerated.documents.map((document) => (
                        <div>
                          <p key={{ documentStoreId }}>{document.documentName}</p>
                        </div>
                      )),
                    )}
                  </div>
                )}
              />

我不确定我到底做错了什么，但我从 S/O 看了一下这个例子：React - how to map nested object values? 但是，我一直遇到同样的错误。我相信我没有在 JSON 中正确映射 documents 对象。非常感谢您在正确方向上的任何帮助。

【问题讨论】：

显然您的文档不是数组...

标签： javascript reactjs react-redux

【解决方案1】：

您的代码docGenerated.documents.map(...) 看起来不错，似乎不是问题。

您的示例 redux 状态切片中可能缺少 [ ] 周围的 documents：

"documents": 
  {
    "documentName": "string",
    "documentStoreId": {{faker 'random.number'}},
    "documentTitle": "string"
  },

如果是这种情况，您不能在documents 上使用.map，因为它是Object 而不是Array。

【讨论】：