Question

环境

Netlify CMS版本：netlify-cms-app@2.12.17
Git提供者：git-gateway
浏览器版本：Mozilla / 5.0（Macintosh；英特尔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公共存储库，因此任何人都可以轻松复制。您还可以看到此站点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

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

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

在default的{{1}}小部件上添加subgroup字段（请参阅here）。
或者您可以在将输入config.yml对象作为自定义groups的道具传递之前，在IndexPagePreview.js中验证和/或修复输入IndexPagePreview：groups.forEach(g => g.subgroup = g.subgroup || []) < / p>

尝试两者，一个人可能会比另一个人在以后处理数据时表现更好。：）

更新：

所以我克隆了您的代码，设置了netlify等，以便为您的数据类型提供一个准确的解决方案。

解决方案1： 请参见下面的两个新的default键。如果为netlify CMS提供了这些内容，则单击new时，它将知道如何为列表小部件创建子对象。否则，它只需要一个空字符串，通常就可以了，但是由于您的预览正在映射子字段，因此对此感到不满意。

 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： 如果整个子对象为空，则需要实例化它，因此在将其传递给props之前，它必须为该子对象。

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

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

Answer 2

解决字符串相同的错误，但在图像 alt 上仍然显示错误。

config.yml

- label: Stranepagesections
        name: stranepagesections
        widget: list
        default:
          - stranepagesectionname: ''
          - stranepagesectionlink: ''
          - stranesectionimage: ''
          - stranesectionimagereducemotion: ''
          - stranesectionimage2: ''
          - stranesectioncontent: ''
        fields:
          - label: Stranepagesectionname
            name: stranepagesectionname
            widget: string
          - label: Stranepagesectionlink
            name: stranepagesectionlink
            widget: string
          - label: Stranesectionimage
            name: stranesectionimage
            widget: object
            fields:
              - label: Image
                name: image
                widget: image
                required: false
              - label: Alt
                name: alt
                widget: string
                required: false
          - label: Stranesectionimagereducemotion
            name: stranesectionimagereducemotion
            widget: object
            fields:
              - label: Image
                name: image
                widget: image
                required: false
              - label: Alt
                name: alt
                widget: string
                required: false
          - label: Stranesectionimage2
            name: stranesectionimage2
            widget: object
            fields:
              - label: Image
                name: image
                widget: image
                required: false
              - label: Alt
                name: alt
                widget: string
                required: false
          - label: Stranesectioncontent
            name: stranesectioncontent
            widget: markdown

这是错误截图。

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

环境

说明

代码

2 个答案: