使用地图滑块不起作用时反应流畅

Question

为什么使用此功能时反应光滑滑块不起作用：

        <Slider className="mb-24" {...settings}>
          {
            mockEventInfoArr.map((el => (
                <div onClick={() => handleOpenEvent(el)}>
                  <li className="flex-center fd-col">
                    <p className="mb-12 fw-600 color-main">{el.name}</p>
                    <p className="fs-small">{formatRelative(el.start, new Date(), { locale })}</p>
                  </li>
                </div>


            )))
          }
        </Slider>

但是当我使用它时它起作用了......

        <Slider className="mb-24" {...settings}>

              <div onClick={() => handleOpenEvent()}>
                <li className="flex-center fd-col">
                  <p className="mb-12 fw-600 color-main">{'asdsda'}</p>
                  <p className="fs-small">{formatRelative(new Date(), new Date(), { locale })}</p>
                </li>
              </div>
    
              <div onClick={() => handleOpenEvent()}>
                <li className="flex-center fd-col">
                  <p className="mb-12 fw-600 color-main">{'asdsda'}</p>
                  <p className="fs-small">{formatRelative(new Date(), new Date(), { locale })}</p>
                </li>
              </div>
        </Slider>

我做错了什么？

这是我使用地图时的图像

在此输入图片描述

€：这是我的设置

const settings = {
  dots: true,
  infinite: true,
  autoplay: true,
  speed: 1000,
  initalSlide: 1,
  autoplaySpeed: 5000,
  slidesToShow: 1,
  slidesToScroll: 1,
};

Answer 1

在 React 中使用

.map

时，您需要在地图中的每个元素上有一个唯一的

key

。您可以使用索引或

uuid

或任何。地图中的

key

有助于在重新渲染时做出反应并识别元素和变化。

<Slider className="mb-24" {...settings}>
    {mockEventInfoArr.map((el, i) => (
        <div key={i} onClick={() => handleOpenEvent(el)}>
            <li className="flex-center fd-col">
                <p className="mb-12 fw-600 color-main">{el.name}</p>
                <p className="fs-small">{formatRelative(el.start, new Date(), { locale })}</p>
            </li>
        </div>
    ))}
</Slider>;