Javascript 将数组映射到bootstrap 4转盘滑块，但将数据获取到单个滑块

这是我的React代码，我正在映射一个对象数组，一切都很好，但是前端在第一张幻灯片上显示了我的所有数据，所以我如何解决这个问题

import React, { useState, useEffect } from "react";
import web from "../../image/nisha.jpg";
import { isAutheticated } from "../../auth/helper/index";
import { getTestis } from "../helper/coreapicalls";
import TestiImg from "../helper/TestiImg";
import "../../styles.scss";
import ReactReadMoreReadLess from "react-read-more-read-less";

const Testimonial1 = () => {
  const [testimonial, setTestimonial] = useState([]);
  const [error, seterror] = useState([]);
  const [loading, setLoading] = useState(false);
  const token = isAutheticated() && isAutheticated().token;
  const userId = isAutheticated() && isAutheticated().user.email;

  useEffect(() => {
    loadTestimonial();
  }, []);

  const loadTestimonial = () => {
    getTestis().then((data) => {
      if (data.error) {
        seterror(data.error);
      } else {
        setTestimonial(data);
        console.log(data);
      }
    });
    setLoading(true);
  };
  console.log(testimonial);
  return (
    <div>
      <h1 className="blog_heading">Testimonials</h1>
      <div className="testimonial">
        <div
          id="carouselExampleSlidesOnly"
          className="carousel slide"
          data-ride="carousel"
        >
          <div className="carousel-inner container">
            {testimonial.map((testi, index) => {
              return (
                <div className="carousel-item active" key={index}>
                  <div className="testimonial_content">
                    <a href={web}>
                      <TestiImg testi={testi} />
                    </a>
                    <h1>{testi.name}</h1>

                    <p>
                      <sup>
                        <i
                          className="fa fa-quote-left mr-2"
                          style={{ fontSize: "14px", color: "#ffca08" }}
                          aria-hidden="true"
                        ></i>
                      </sup>
                      <ReactReadMoreReadLess
                        charLimit={200}
                        readMoreText={"Read more ▼"}
                        readLessText={"Read less ▲"}
                        readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
                      >
                        {testi.achievement}
                      </ReactReadMoreReadLess>
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Testimonial1;

import React，{useState，useffect}来自“React”；
从“../../image/nisha.jpg”导入web；
从“./../auth/helper/index”导入{IsAuthenticated}”；
从“./helper/coreapicalls”导入{getTestis}；
从“./helper/testimg”导入testimg；
导入“../../styles.scss”；
从“react READE more READLESS”导入REACTREADMOREADLESS；
常数证明1=（）=>{
常量[推荐的，固定的]=useState（[]）；
const[error，seterror]=useState（[]）；
const[loading，setLoading]=useState（false）；
const token=IsAuthenticated（）&&IsAuthenticated（）.token；
const userId=isAuthenticated（）&&isAuthenticated（）.user.email；
useffect（（）=>{
加载证明（）；
}, []);
const loadEstimational=（）=>{
getTestis（）。然后（（数据）=>{
if（data.error）{
设置错误（data.error）；
}否则{
时间（数据）；
控制台日志（数据）；
}
});
设置加载（真）；
};
控制台日志（证明文件）；
返回(
推荐书
{证明映射（（证明，索引）=>{
返回(
{testi.name}

{测试成绩}

);
})}
);
};
导出默认证明1；

我不知道该怎么办？

（对不起，我不能发表评论）

这是因为以下几行：

在数组中映射时，数组中的每个元素都将有一个

---

**active**

className，而且它往往会同时出现

这是我第二次编辑您的问题，写100遍“请帮助”不会导致更快的回答。请以后避免使用。但删除活动类名后，将一无所获@Aashiqo你可以做的一件事是代替自动旋转木马，添加一个按钮导航，然后创建一个函数，通过单击导航按钮添加/删除活动类名。实际上，我需要自动旋转木马兄弟。。！如果我需要按钮导航，我可以使用{npm I react responsive carousel}@Aashiq