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, like Gecko) Chrome/84.0.4147.89 Safari/537.36

解釋

正如您在下面看到的，代碼大部分都有效，但特別是在 CMS 的預覽窗格中，當我添加一個group元素（列表）時，由於某種原因它會中斷。 我注意到這個問題發生在自定義預覽模板中，在這一行中，但我在那里看不到任何錯誤。 有可能解決它嗎？

添加group元素時

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

代碼

我只用所需的代碼創建了這個公共存儲庫，因此任何人都可以輕松復制。 您也可以在此處查看此站點。

配置.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字段（請參見此處）。

2. 或者，您可以驗證和/或修復 IndexPagePreview.js 中的輸入groups IndexPagePreview.js ，然后將其作為道具傳遞給您的自定義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 只是修復了預覽器的對象，它對保存的文件沒有任何影響。

Answer 2

相同的錯誤解決了字符串，但在圖像 alt 上仍然顯示錯誤。

配置.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

這是錯誤截圖。