我正在尝试制作一个无限滚动滑块，但结果只是一个列表

Question

当尝试静态数据时，滑块工作正常，但当我从API获取数据时，设计分解为列表，滑块停止工作。滑块的实现如下:

js

 $(".feedback-slider").bxSlider({
        slideWidth: 177,
        minSlides: 1,
        maxSlides: 6,
        slideMargin: 15,
        touchEnabled: false,
      });

反应呈现

<ul className="feedback-slider">
                    {ApiRes.map((item, i) => {
                    return (
                    <li key={i}>
                        <div className="feedback-single-box">
                            <div className="card p-20">
                                <p className="m-0">{item.review}</p>
                            </div>
                            <div className="media">
                                <div className="thumbnail">
                                    {
                                        item.customerimage === null ?
                                        <img 
                                            width="36px"
                                            src = "/assets/img/avtar.png"
                                            alt = "/"/>
                                        :
                                        <img
                                         width="36px"
                                         src={ImgPath + item.customerimage}
                                         alt={item.name}
                                         />   
                                    }
                                </div>
                                <div className="media-body">
                                    <span className="designation">{item.name}</span>
                                    <h6 className="title">{item.title}</h6>
                                </div>
                            </div>
                        </div>
                    </li>
                    );
                    })}
                </ul>

我期望的结果是一个无限滚动滑块，但我得到的结果是一个没有滑块工作的列表。你们谁能告诉我我哪里做错了吗?

Answer 1

那是因为，在执行滑块的脚本时，feedback-slider元素内部没有元素，我建议您在收到数据后执行脚本。

也许您需要在useEffect钩子中添加脚本，并将数据和refs作为依赖项添加到li元素，因此脚本不会执行，直到数据到达并且创建和挂载li元素。

Answer 2

如Mina所述，当执行bxSlider函数时，feedback-slider列表中没有任何项。

你需要使用一个useEffect React钩子或componentDidMount生命周期函数来等待你的API返回一些数据和React来渲染列表项。只有这样才能初始化bxSlider。

下面的代码片段大致再现了您想要实现的目标。

// Function to generate fake API response
function getFakeAPIResponse() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(Array.from({ length:10 }).map((_, i) => [{
        review: `Review-${i}`,
        name: `Name-${i}`,
        title: `Title-${i}`
      }]))
    }, 1000)
  })
}
// Slider component
function Slider() {
  const [apiRes, setApiRes] = React.useState([])
  
  React.useEffect(() => {
    getFakeAPIResponse().then(setApiRes)
  }, [])
  
  React.useEffect(() => {
    if (apiRes && apiRes.length > 0) {
      $(".feedback-slider").bxSlider({
        slideWidth: 177,
        minSlides: 1,
        maxSlides: 6,
        slideMargin: 15,
        touchEnabled: false,
      })
    }
  }, [apiRes])
  
  return (
    <ul className="feedback-slider">
      {apiRes.map((item, i) => (
        <li key={i}>
          <div className="feedback-single-box">
            <div className="card p-20">
              <p className="m-0">{item.review}</p>
            </div>
            <div className="media">
              <div className="thumbnail">
                <img src='https://source.unsplash.com/random/300x300' alt="/" />
              </div>
              <div className="media-body">
                <span className="designation">{item.name}</span>
                <h6 className="title">{item.title}</h6>
              </div>
            </div>
          </div>
        </li>
      ))}
    </ul>
  )
}
// Render React app
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<Slider />)

<!-- bxslider -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<!-- react -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<!-- app -->
<main id='root'></main>