Slider 組件在 React 中無法正常工作

Question

我正在嘗試構建一個組件，其中顯示一組值，例如 slider，每次，舊內容都會被新內容替換，這可以使用下一個和上一個按鈕來完成。 該組件正在工作，但我在邊緣情況下有點掙扎，我必須禁用按鈕

我將把鏈接留給正在構建組件的代碼框，我相信它會更容易理解發生了什么。

沙盒鏈接

Answer 1

盡量不要將 state 值用於跟蹤按鈕禁用狀態。 請檢查以下。

import React, { useState } from "react";

export default function App() {
  const data = ["q", "c", "s", "a"];

  const [iterator, setIterator] = useState(0);
  const [curr, setCurr] = useState(data[iterator]);

  const fetchNext = () => {
    if (iterator === data.length - 1) {
      return;
    }
    setIterator((prev) => prev + 1);
    setCurr(data[iterator + 1]);
  };

  const fetchPrevious = () => {
    if (iterator === 0) {
      return;
    }
    setIterator((prev) => prev - 1);
    setCurr(data[iterator - 1]);
  };

  const nextDisabled = iterator >= data.length - 1;
  const prevDisabled = iterator <= 0;

  return (
    <div>
      <h1>{curr}</h1>
      <button disabled={nextDisabled} onClick={fetchNext}>
        next
      </button>
      <button disabled={prevDisabled} onClick={fetchPrevious}>
        previous
      </button>
    </div>
  );
}