Проверьте, есть ли у JSON дочерние элементы несколько раз в возврате
Я пытаюсь проверить длину (или существует ли она вообще) дочерних элементов JSON, прежде чем перебирать их. мой пример имеет примечание:
{const itHasChildren = item.child_items.length;}
ошибка, которую я получаю выше,
Источник/Компоненты/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>
);
не могли бы вы показать мне пример того, как мой код будет работать с фрагментом, я добавил их и все равно получил синтаксические ошибки
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я немного подчистил ваш код, так что он должен работать. Только первый элемент внутри карты нуждается в key, и, согласно вашим данным, это может быть позиция индекса в массиве.
return (
<nav className = "navbar navbar-expand-lg navbar-light bg-light">
<button
className = "navbar-toggler"
type = "button"
data-toggle = "collapse"
data-target = "#navbarNavDropdown"
aria-controls = "navbarNavDropdown"
aria-expanded = "false"
aria-label = "Toggle navigation"
>
<span className = "navbar-toggler-icon"></span>
</button>
<div className = "collapse navbar-collapse" id = "navbarNavDropdown">
<ul className = "navbar-nav">
{(menus || []).map((item, ix) => (
<li key = {ix} className = "nav-item active">
<Link
className = "nav-link"
to = {{
pathname: item.slug,
state: {
pageId: item.slug
}
}}
>
{item.title}
</Link>
{(item.child_items || []).map((childItem, ix) => (
<div key = {ix} className = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink">
<Link
className = "dropdown-item"
to = {{
pathname: childItem.slug,
state: {
pageId: childItem.slug
}
}}
>
{childItem.title}
</Link>
</div>
))}
</li>
))}
</ul>
</div>
</nav>
);
спасибо за помощь .. это не сработало .. я все еще получаю ошибку индекса .. кроме того, в первых классах li и link нет условных операторов
Я понял ошибку ключа, раскрывающийся элемент div должен находиться за пределами child_items.map... но опять же, как и первый элемент списка и ссылка, я хочу отображать его только в том случае, если есть дочерние элементы. Мне нужно создать что-то, что я могу использовать 3 раза, если child_items отображают это, иначе отображают это
Итак, вам нужен тест child_items.length
Как бы это выглядело? Например, как только я пытаюсь отобразить {item.child_items.length}, я получаю ошибки Uncaught TypeError: item.child_items is undefined и SyntaxError: /Users/justin/Desktop/react-wordpress-headless/src/Component s/HeaderComponent/header.js: неожиданный токен, ожидаемый "," (45:8)
вот синтаксис и условие, которое я искал
<li
className = {
item.child_items
? "nav-item dropdown"
: "nav-item "
}
Это приведет к синтаксической ошибке, так как это код jsx
{item.child_items && item.child_items.map((childItem) => ( <div /> ))}и должен работать внутри компонента или фрагмента<></>