vue jsx多层map嵌套问题

Z时代
2024-02-08
分类：IT

vue jsx多层map嵌套问题

数据格式为:

this.form.data[i].col[i].col[i].data[i]

需要取到最后这层的data为数据，但是，最后这层data可能是为空的，这就导致了会出现 Cannot read properties of undefined (reading 'map')的情况。

原错误代码↓

render: (h, params) => {
            const subjectId = { subjectId: this.form.subjectId }
            return <div class='text-left'>
              {
                params.row.data.map((item, index) => {
                  {
                    item.col.map((obj, index) => {
                      {
                        obj.col.map((obj, index) => {
                          const rules = obj.data || []
                          return <RuleModule ref='ruleModule' v-model={rules} index={0} multiple-limit={1} subject-id={this.form.subjectId} />
                        })
                      }
                    })
                  }
                })
              }
            </div>          }

还有一种情况是在新增的时候，也就是前面几层都为空的情况下，我需要如何才能把数据也绑定到最后这层data里

在这里先感谢各位大神们的解答，小弟感激不尽！

回答：

可以使用可选运算符 ?. 来防止链式调用出现用空值上读取属性的错误，如：

// 最后可使用 ?? 或者 || 判断来给予一个默认值this.form.data?.[i]?.col?.[i]?.col?.[i]?.data?.[i] ?? defaultValue

像是你在 jsx 中嵌套可以这样写

const render = (h, params = {}) => {
  const subjectId = { subjectId: this.form.subjectId }
  return <div class='text-left'>
    {
      (params.row?.data || []).map((item, index) => {
        {
          (item.col || []).map((obj, index) => {
            {
              (obj.col || []).map((obj, index) => {
                const rules = obj.data || []
                return <RuleModule ref='ruleModule' v-model={rules} index={0} multiple-limit={1} subject-id={this.form.subjectId} />
              })
            }
          })
        }
      })
    }
  </div>}