React映射Redux嵌套数据报documents.map is not a函数如何解决

问题根因 #

你提供的Redux Slice结构中，documents字段为单个对象，而map是JavaScript数组的专属方法，对对象调用该方法自然会抛出「不是函数」的报错。

修复方案 #

方案1：调整Redux数据结构（推荐） #

如果业务逻辑中一个分组下可能存在多个文档，将documents修改为数组结构即可，调整后的Slice结构如下：

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

调整完成后你现有的map遍历逻辑即可正常运行。

方案2：调整前端渲染逻辑（无需修改数据层） #

如果业务逻辑中一个分组下确实仅存在一个文档，不需要使用map遍历，直接读取对象属性即可：

const documentGenerated = useSelector(selectDocumentGenerated);

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

其他注意事项 #

• 原代码中key={{ documentStoreId }}写法错误，key需要为字符串/数字基础类型，不需要额外嵌套大括号，直接写key={document.documentStoreId}即可
• 遍历外层documentGenerated数组时也需要给根节点添加唯一key，推荐使用groupId作为key值

内容的提问来源于stack exchange，提问作者Noble Polygon