Почему прохождение Map.Entries () Итератор в качестве ребенка к совокупному от Shadcn ничего не делает, если я не заверн ⇐ Javascript

[Anonymous]

Я использую Shadcn/UI с Codix UI Complassible , чтобы создать раздел складного фильтра.

Код: Выделить всё

import { ReactNode, useEffect, useState } from "react";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
import { Button } from "./ui/button";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

export function CollapsibleFilter({
title,
children,
tmp,
}: {
title: string;
children: ReactNode;
tmp?: any;
}) {
const [open, setOpen] = useState(false);
useEffect(() => {
console.log("children", children);
console.log("tmp", tmp);
}, [open]);
return (



{title}




{children}


);
}

На моей странице я пытаюсь рендерировать детей с карты :

Код: Выделить всё

import { CollapsibleFilter } from "@/components/collapsible-filter";
import { useEffect, useState } from "react";

export default function Home() {
const [mapObj, setMap] = useState();
useEffect(() => {
setMap(new Map([["John", "abc"]]));
}, []);
return (


using Array.from(map.entries())

{Array.from(mapObj?.entries() ?? []).map((kv) => {
return (

name:{kv[0]}
tag:{kv[1]}

);
})}


using

Код: Выделить всё

map.entries()

{mapObj?.entries().map((kv) => {
return (

name:{kv[0]}
tag:{kv[1]}

);
})}


outside of collapsible filter
{mapObj?.entries().map((kv) => {
return (

name:{kv[0]}
tag:{kv[1]}

);
})}

);
}

в test1 (

Код: Выделить всё

Array.from()

) элементы визуаливы. В Test2 (

Код: Выделить всё

mapObj.entries()

напрямую) Ничто не видно внутри складных. Но то же самое {mapoBj? />
Почему передача результата, возвращаемого mapobj.entries (). Map как дети в Complasbiblefilter рендеринг ничего, но прохождение массива из Array.from (mapobj.entries ()). Map работает? И почему версия итератора по -прежнему работает, если я помесчу ее за пределы складного компонента? < /P>
Полный демонстрационный репо. В прямом эфире. Передав этот компонент с детьми, он будет отображать содержание детей, когда открывается склад. Когда я пишу: < /p>

Код: Выделить всё

hello world

он должен показать это в браузере (нажмите на Complassible):

I Создано varible varible mapj />

Код: Выделить всё

const [mapObj, setMap] = useState();
useEffect(() => {
setMap(new Map([["John", "abc"]]));
}, []);

, который является объектом типа карты и будет инициализирован с помощью пары значений ключей ["John", "abc"] . Когда я пишу: < /p>

Код: Выделить всё

outside of collapsible filter
{mapObj?.entries().map((kv) => {
return (

name:{kv[0]}
tag:{kv[1]}

);
})}

Как и ожидалось, отображается содержимое MapoBJ :

это идет против этого ответа, который утверждает, что это не может быть возвращено, что это не может быть возвращено, что это не может быть возврат. This ("test1"): < /p>

Код: Выделить всё

using Array.from(map.entries())

{Array.from(mapObj?.entries() ?? []).map((kv) => {
return (

name:{kv[0]}
tag:{kv[1]}

);
})}

< /code>
также работает, как и ожидалось. Содержание MapObj находится внутри моего компонента COLLASBIBLEFILTER , нажмите, чтобы открыть Complasbible:

strice epo (p -tes (p> strice2 "/>
strice (pr/pr/pt (pr/pr/pt (pr/pt (pr/pr/pt. />

Код: Выделить всё

using map.entries()

{mapObj?.entries().map((kv) => {
return (

name:{kv[0]}
tag:{kv[1]}

);
})}


против ожиданий, когда я нажимаю на складываемые, нет ничего:

Зачем>

Подробнее здесь: https://stackoverflow.com/questions/797 ... rom-shadcn