JS 同步和异步 onclick 函数

Question

我最近一直在努力解决这个问题。 我不确定它是否与 JS 中的“同步/异步”函数有任何联系。 如果是这样，我会更感激了解这种联系。

我一直在制作一个简单的组件功能：有一个按钮“下一步”、“返回”和“重置”。 一旦按下匹配的按钮，它允许根据按钮的类型在链接之间移动。 链接是一个数组：

const links =  ["/", "/home", "/game"];

这是组件：

function doSomething() {
  const [activeLink, setActiveLink] = React.useState(0);
  const links =  ["/", "/home", "/game"];
  
  const handleNext = () => {
  setActiveLink((prevActiveLink) => prevActiveLink+ 1);
};

  const handleBack = () => {
    setActiveLink((prevActiveLink) => prevActiveLink- 1);
  };

  const handleReset = () => {
    setActiveLink(0);
  };

  return (

            <div>

            <button onClick={handleReset}>
            <Link className = 'text-link' to = {links[activeLink]}> Reset</Link>
            </button>

            <button onClick={handleBack}>
            <Link className = 'text-link' to = {links[activeLink]}>Back</Link>
            </button>

             <button onClick={handleNext}>
            <Link className = 'text-link' to = {links[activeLink]}>Next</Link>
            </button>
            </div>

当我尝试将activeLink放在 Link 的“to”属性中时，它会放置它的旧值。 我的意思是，handleNext/handleReset/handleBack 发生在链接已经设置之后； 第一次按下“next”需要将我带到 links 数组的第一个索引，但它保持在“0”上。

它是否与useState中的setActiveLink是同步函数这一事实有关？ 还是与链接有关？

我想知道是什么问题，以及如何解决它。 谢谢你。

Answer 1

您的Link似乎正在导航到一个新页面？

如果是这样， React.useState(0)每次都会被调用，默认值为 0。

此外，您的函数handleNext和handleBack不是从我所看到的调用。