顺风元素：未处理的运行时错误类型错误：使用轮播时无法读取 null 的属性(读取"classList")

Question

我正在审查使用Carousel组件时的错误:Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'classList')。在我的例子中，我通过一个图像数组进行映射，并将carousel项目添加到carousel，如下所示:

<div className="carousel-inner relative w-full overflow-hidden max-h-[300px]">
{project.imageslist.map((image, i) => (
<div
key={i}
className={`carousel-item ${i < 1 ? "active" : ""} float-left w-full`}>
<img
src={image.listitemimg}
className="block w-full"
alt="Wild Landscape"
/>
</div>
))}
</div>

任何想法?

我已经尝试手动添加每个carousel-item，而不是使用映射映射通过数组，但我仍然有同样的问题。

Answer 1

这个问题的答案是，还需要添加与幻灯片数量相同数量的button元素。例如，我添加了4个幻灯片(carousel-item)，但在carousel-indicator中只有3个按钮。所以我添加了一个带有正确细节的额外按钮(data-bs-slide和aria-label增加1)。

例子(修复):

<div
className="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
<button
type="button"
data-bs-target="#carouselExampleCrossfade"
data-bs-slide-to="0"
className="active"
aria-current="true"
aria-label="Slide 1"></button>
<button
type="button"
data-bs-target="#carouselExampleCrossfade"
data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button
type="button"
data-bs-target="#carouselExampleCrossfade"
data-bs-slide-to="2"
aria-label="Slide 3"></button>
<!-- Fix added below -->
<button
type="button"
data-bs-target="#carouselExampleCrossfade"
data-bs-slide-to="3"
aria-label="Slide 4"></button>
</div>

Answer 2

可能是project.imageslist数组为空或未定义。

尝试先检查project.imageslist。长度比;0在通过数组映射之前:

{project.imageslist.length > 0 && project.imageslist.map((image, i) => (
<div
key={i}
className={`carousel-item ${i < 1 ? "active" : ""} float-left w-full`}>
<img
src={image.listitemimg}
className="block w-full"
alt="Wild Landscape"
/>
</div>
))}