Question

我开始学习React并构建一个简单的图片轮播。我有3个图像是从Github中以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

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

您将不得不在组件外部进行定义（，但是如果您想同时使用两个App组件，则会造成一些问题。

或者您可以直接使用counter，这就是使用state的重点。（还可以对数组长度使用模数，以将counter限制为仅与图像匹配的值）

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

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

动态更改轮播的图像源

1 个答案: