TypeError: Cannot read property 'map' of undefined on 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, in this line 中，但我看不出那里有什么问题。有可能解决它吗？

添加group元素时

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

代码

我创建了 this public 存储库，只包含所需的代码，因此任何人都可以轻松复制。你也可以看看这个网站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 自定义预览的此类问题，您有两种选择：

在 config.yml 的 subgroup 小部件上添加一个 default 字段（参见 here）。
或者您可以验证 and/or 修复 IndexPagePreview.js 中的输入 groups 对象，然后再将其作为道具传递给您的自定义 IndexPagePreview： groups.forEach(g => g.subgroup = g.subgroup || [])

两者都试试，对于您之后对数据所做的工作，一个可能比另一个更好。 :)

更新：

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

解决方案一： 请参阅下面的两个新 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 }],
        },
      ],
  }

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

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

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

TypeError: Cannot read property 'map' of undefined on Netlify CMS/React.js

TypeError: Cannot read property 'map' of undefined on Netlify CMS/React.js

javascript

reactjs

netlify

netlify-cms

环境

说明

代码