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里

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

阅读 3k
2 个回答

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

// 最后可使用 ?? 或者 || 判断来给予一个默认值
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>
}

item.col.mapobj.col.map改成item.col?.mapobj.col?.map
新增的时候也验一下,位置为空就建呗。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏