Question

我正在使用ReactJs并将map放入map内，但是在c.children中使用map函数的地方却出现了此错误

{c.description}工作正常。但是我无法绘制c.children。

JSON：

代码：

<div className="side-tab">
              { apiData !== false &&
              apiData.data.map(((c) => (<div>
                {c.description}
                {
                  c.childrens.map(i => (
                    <ProductTab />
                  ))
                }
              </div>)
              ))
              }
            </div>

Answer 1

尝试一下：

  <div className="side-tab">
    {apiData && apiData.data && apiData.data.map(c => (
        <div>
          {c.description}
          {c.childrens && c.childrens.map(i => (
            <ProductTab />
          ))}
        </div>
      ))}
  </div>

Answer 2

您正在未定义的属性中调用map函数。这意味着c.childrens未定义。如果您看到自己的数据，则apiData中的某些项目具有属性childrens，而其他项目则没有（“培训和认证”和“工具”没有）。解决方案是在调用map函数之前检查它们是否未定义。

检查c.childrens是否未定义，或是否具有值：

c.childrens && c.childrens.map

或

c.childrens && c.childrens.length > 0 && c.childrens.map

因此您的代码将如下所示：

<div className="side-tab">
    {apiData !== false &&
        apiData.data.map(((c) => (<div>
            {c.description}
            {
             c.childrens && c.childrens.length > 0 && c.childrens.map(i => (
                <ProductTab />
              ))
            }
          </div>)
          ))
          }
        </div>

未捕获的TypeError：无法在react中读取未定义的属性'map'

2 个答案: