Блог

В последнее время я боролся с этой проблемой. Я не уверен, имеет ли это какое-либо отношение к функциям «sync / async» в 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 в атрибут «to» ссылки, он помещает его старое значение. Я имею в виду, что handleNext / handleReset / handleBack происходит после того, как ссылка уже установлена; Первое нажатие на «next» должно привести меня к первому индексу массива ссылок, но он остается на «0».

Связано ли это как-то с тем фактом, что setActiveLink from useState является функцией синхронизации? или что-то связанное со ссылкой?

Я хотел бы знать, в чем проблема, и как ее решить. Спасибо.

Ваши Link , похоже, переходят на новую страницу?

Если это так, то React.useState(0) вызывается каждый раз, оставляя значение по умолчанию равным 0.

Также ваши функции handleNext и handleBack не вызываются из того, что я вижу.