检查 JSON 是否在返回中多次包含子元素

Question

我正在尝试在循环遍历 JSON 子元素之前检查它们的长度（或者是否存在）。我的例子有一个注释：

{const itHasChildren = item.child_items.length;}

我上面得到的错误是

src/Components/HeaderComponent/header.js 第 60:29 行：“childItem”未定义 no-undef

搜索关键字以了解有关每个错误的更多信息。

 return (

    <nav >

    

      <ul className="navbar-nav">

        {menus &&

          menus.map((item) => (

          

              <li className="nav-item active" key={item.ID}>

              

                  <Link >{item.title} </Link>

     // I NEED TO CHECK THE LENGTH  OR IF child_items EXISTS 

     //  HERE SO I CAN DECIDE WHETHER TO DISPLAY THIS DIV OR NOT

              {item.child_items.map((childItem).length)}

              <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" >

              {item.child_items &&

                item.child_items.map((childItem) => (

            

                      <Link >{childItem.title} </Link>

                    

                      ))}

                  </div>

            </li>

           

          ))}

      </ul>

 </nav>

  );

Answer 1

我已经清理了你的代码，所以它应该可以工作。只是地图内的第一个元素需要，key根据您的数据，它可能是数组中的索引位置&nbsp; return (&nbsp; &nbsp; <nav className="navbar navbar-expand-lg navbar-light bg-light">&nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; className="navbar-toggler"&nbsp; &nbsp; &nbsp; &nbsp; type="button"&nbsp; &nbsp; &nbsp; &nbsp; data-toggle="collapse"&nbsp; &nbsp; &nbsp; &nbsp; data-target="#navbarNavDropdown"&nbsp; &nbsp; &nbsp; &nbsp; aria-controls="navbarNavDropdown"&nbsp; &nbsp; &nbsp; &nbsp; aria-expanded="false"&nbsp; &nbsp; &nbsp; &nbsp; aria-label="Toggle navigation"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <span className="navbar-toggler-icon"></span>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div className="collapse navbar-collapse" id="navbarNavDropdown">&nbsp; &nbsp; &nbsp; &nbsp; <ul className="navbar-nav">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {(menus || []).map((item, ix) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={ix} className="nav-item active">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="nav-link"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pathname: item.slug,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; state: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageId: item.slug&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {(item.child_items || []).map((childItem, ix) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={ix} className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="dropdown-item"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; to={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pathname: childItem.slug,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; state: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageId: childItem.slug&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {childItem.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </nav>&nbsp; );

Answer 2

这是我正在寻找的语法和条件<li&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;className={ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item.child_items &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;?&nbsp;"nav-item&nbsp;dropdown" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;"nav-item&nbsp;&nbsp;" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}