TypeError：无法读取 Netlify CMS/React.js 上未定义的属性“地图”

Question

环境

• Netlify CMS 版本：netlify-cms-app@2.12.17
• Git 提供者：git-gateway
• 浏览器版本：Mozilla/5.0（Macintosh；Intel Mac OS X 10_11_6） AppleWebKit/537.36（KHTML，如 Gecko）Chrome/84.0.4147.89 Safari/537.36

说明

正如您在下面看到的，代码大部分都有效，但特别是在 CMS 的预览窗格中，当我添加 group 元素（列表）时，由于某种原因它会中断。我注意到这个问题发生在custom preview template 和this line 中，但我看不到那里有任何问题。有没有可能的解决办法？

添加group 元素时

添加 subgroup 元素（嵌套列表）时 - 它按预期工作

代码

我只用所需的代码创建了this public repo，因此任何人都可以轻松复制。 你也可以看这个网站here。

config.yml

publish_mode: simple
slug:
  encoding: unicode
  clean_accents: false
  sanitize_replacement: "-"
backend:
  name: git-gateway
  branch: master
media_folder: static/images
public_folder: /images
collections:
  - name: pages
    label: Pages
    files:
      - file: src/pages/index.md
        label: Index
        name: index
        fields:
          - label: Groups
            name: groups
            widget: list
            fields:
              - label: Title
                name: title
                widget: string
              - label: Subgroups
                name: subgroups
                widget: list
                fields:
                  - label: Subtitle
                    name: subtitle
                    widget: string
    publish: true
    sortableFields:
      - commit_date
      - commit_author
    view_filters: []

Answer 1

当您添加新的 Group 时，map 失败，因为 subgroup 字段未定义。

对于 netlify-cms 自定义预览的此类问题，您有两种选择：

1. 在config.yml 的subgroup 小部件上添加default 字段（请参阅here）。

2. 或者您可以验证和/或修复IndexPagePreview.js 中的输入groups 对象，然后将其作为道具传递给您的自定义IndexPagePreview：groups.forEach(g => g.subgroup = g.subgroup || [])

两者都尝试一下，对于您之后处理数据的操作，其中一个可能比另一个更有效。 :)

---

更新：

所以我克隆了你的代码，设置了 netlify 等等，这样我就可以得到一个适用于你的数据类型的精确解决方案。

解决方案 1： 请参阅下面的两个新 default 键。如果 netlify CMS 提供了这些，那么当您单击新建时，它知道如何为列表小部件创建子对象。否则它只适用于一个空字符串，这通常很好，但由于您的预览是映射子字段，它对此并不满意。

 fields:
 - {
    label: Groups,
    name: groups,
    widget: list,
    fields:
      [
        { label: Title, name: title, widget: string, default: ''},
        {
          label: Subgroups,
          name: subgroups,
          widget: list,
          default: [{ subtitle: '' }],
          fields:
            [{ label: Subtitle, name: subtitle, widget: string }],
        },
      ],
  }

解决方案 2： 如果它是空的，你需要实例化整个子对象，所以在你将它传递给道具之前它需要是 this 。

groups.forEach(g => g.subgroups = g.subgroups || [{subtitle:''}])

仔细观察后，“正确”的方式（解决方案 1）似乎更好，因为 CMS 实际上是以更好的方式创建对象，并且也会以正确格式的方式保存对象。解决方案 2 只是修复了预览器的对象，它对保存的文件没有任何影响。