javascript - 动态更改轮播的图像源

Question

我正在开始学习 React 并构建一个简单的图片轮播。我从 Github 中提取了 3 个图像 const大批。要求是有一个前进和后退按钮来循环浏览图像。
应用程序启动后，第一张图像正确显示。该按钮正确增加计数器(我有控制台日志确认)。
但是<img>不会根据修改后的计数器变量刷新/重新加载从数组加载下一个图像。

目前我只实现了前进按钮功能。

const photoList = [
  "https://avatars0.githubusercontent.com/u/810438?v=4",
  "https://avatars2.githubusercontent.com/u/6820?v=4",
  "https://avatars2.githubusercontent.com/u/63648?v=4"
];

//Component for the Forward button

function ForwardButton(props) {
  console.log("Forward Button clicked");
  const handleClick = () => props.OnClick(props.increment);
  return <button onClick={handleClick}> --> </button>;
}

//Component for the Back button

function BackButton() {
  return <button className="BackButton"> {"<--"} </button>;
}

//Main component with other components nested

function App() {
  const state = {
    profiles: photoList
  };

  let count = 0;

  const [counter, setCounter] = useState(0);
  const IncrementCounter = incrementValue => {
    setCounter((count = counter + incrementValue));
    console.log(count);
  };
  return (
    <div className="App">
      <header> Picture Carousal</header>
      <img className="Image" src={state.profiles[count]} />
      <BackButton />
      <ForwardButton OnClick={IncrementCounter} increment={1} />
    </div>
  );
}

ReactDOM.render(<App />, mountNode);

我想使用这个非常简单的实现，并尝试弄清楚如何制作 <img>使用新图像刷新。希望这是一个简单的修复。

Answer 1

在 App 组件中定义的 count 在每次重新渲染时都会重置。

您必须在组件外部定义它(但如果您同时想要两个 App 组件，这可能会产生一些问题)。

或者您可以直接使用计数器，这就是使用state的全部意义。(还可以使用数组长度的模来将计数器限制为仅与图像匹配的值)

const IncrementCounter = incrementValue => {
  setCounter((counter + incrementValue) % photoList.length);
};

演示地址:https://codesandbox.io/s/nostalgic-browser-qfudx