在页面重新加载时重置渲染 UseEffect 和 Css

Question

我从反应开始，尝试制作一个水平滚动页面。除了一件事之外，它似乎工作得很好，其中我很确定我缺少一些 React 逻辑。我使用一个 targetContainer div，其中包含几个页面（全屏）和一个 Navbuttons 类来移动它。在下面的代码中，我使用“NavButtons”功能组件来设置 targetContainers“left”值。但是当我用 F5 重新加载页面时，我的页面保持设置的样式（例如 left:-300%），但 pageCounter 返回到 0，破坏了导航按钮...我很确定它是因为我使用的是 css 样式，但是解决这个问题的正确/最佳方法是什么？import React, { useEffect, useState } from 'react';const NavButtons = (props) => {  const maxCount = props.maxCount;  const [pageCounter, setPageCounter] = useState(0);  const scrollPrev = function () {    if (pageCounter > 0) {      setPageCounter(pageCounter - 1);    }  }  const scrollNext = function () {    if (pageCounter < (maxCount - 1)) {      setPageCounter(pageCounter + 1);    }  }  useEffect(() => {    props.targetContainer.current.style.left = -((pageCounter) * 100) + 'vw';  }, [pageCounter, props.targetContainer]);  useEffect(() => {    setToZero();  }, []);  const setToZero = function () {    setPageCounter(0);    props.targetContainer.current.style.left = 0;  }  return (    <div className="NavButtons">      <button onClick={scrollPrev}>Prev</button>      <button onClick={scrollNext}>Next</button>    </div>  )}export default NavButtons;这是一个 stackblitz， https://react-zyvu7o.stackblitz.io/编辑： https://stackblitz.com/edit/react-zyvu7o?file =src/components/Navbuttons.js“不幸的是”它在 stackblits 上正常工作，但在我的本地主机上却不起作用......:(

Answer 1

我相当有信心这只会由于浏览器缓存和热重载而发生，这就是它在您的示例中工作而不是在本地工作的原因。