"如何在反应中使用 useState 更改幻灯片？"

Question

这可能是一个基本的东西，但我试图弄清楚如何点击按钮更改幻灯片。 我有来自电影 API 的数据的 div，所以我单击一个按钮并更改幻灯片，在其中切换活动类。 我可以想象用普通的 javascript 来做，但我试图了解如何在 React 中做到这一点。 该函数如下所示：

 const [currentSlide, setCurrentSlide] = useState(0);
function changeSlide(){
      if(currentSlide <= few_movies.length){
          setCurrentSlide(currentSlide + 1);
      }else if(currentSlide >= few_movies.length){

      }
  }

Answer 1

快速回答是的，您可以使用 useState 挂钩更改幻灯片。

我建议您将所有幻灯片（电影）保存在一个数组中，或者为它们设置一些索引值，例如 id，然后您可以根据当前幻灯片索引进行数学运算来更改它们。 如果当前幻灯片是例如 5，并且您想查看上一张幻灯片，则单击事件应该增加或减少索引，您应该将状态的值设置为当前 - 1。这基本上是逻辑。

返回（显示幻灯片）您只需查看来自 API 的哪些数据与当前幻灯片具有相同的 id（索引），并仅显示其数据。

希望你能理解，我没有混淆你。 祝你好运，快乐编码。

Answer 2

而不是将其设置为setCurrentslide(0)<\/code>为什么不什么都不做呢？

如果它们在幻灯片索引0<\/code>处相同，那么不要让它们进一步低于0<\/code>

currentSlide.length >= few_movies.length ? console.log('do nothing') : setCurrentSlide(oldState => oldState +1)