JS同步和异步onclick函数

如何解决JS同步和异步onclick函数

我最近一直在努力解决这个问题。 我不确定它是否与JS中的“同步/异步”功能有关。如果确实如此，那么我将不胜感激了解这种联系。

我一直在做一个简单的组件函数： 有一个按钮“下一个”，“后退”和“重置”。按下匹配的按钮后，它可以根据按钮的类型在链接之间移动。 链接是一个数组：

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

以下是组件：

function doSomething() {
  const [activeLink,setActiveLink] = React.useState(0);
  const links =  ["/","/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发生在链接已设置之后；第一次按“下一个”需要将我带到links数组的第一个索引，但仍保持在“ 0”上。

是否必须对setActiveLink中的useState是同步功能进行某些处理？或与链接有关？

我想知道问题出在哪里，以及如何解决。 谢谢。

解决方法

您的 user: User; idParam: string; ngOnInit(): void { this.route.params.subscribe(params => { this.idParam= params[`id`]; if (!!this.idParam) { this.httpHandler.getUser(idParam) .subscribe(user => this.user = user); } else { this.user = { id: '',name: '' }; } }); } 似乎正在导航到新页面？

如果是这样，每次都会调用Link，使您的默认值为0。

据我所见，还没有调用您的函数React.useState(0)和handleNext。