Diskuze: React: Hook useState se neustále vrací na původní hodnotu.

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

tomekmichalhu

Člen

tomekmichalhu:21.9.2022 1:12

Ahoj, mám problém s hookem useState. Doteď mi vždycky fungoval jak má. Teď mám 2 komponenty v jednom souboru a asi to ten hook rozbíjí, protože se pořád vrací na původní hodnotu. Asi to bude nějaká blbost, nějakej překlep, co jsem si ho nevšiml, ale já na to prostě nedokážu sám přijít.

import cssStyle from "./progressbarDiv.module.css";
import { useState, useEffect } from "react";

function ProgressBarDiv(props) {
  return (
    <div className={cssStyle.main}>
      <div>{props.children}</div>
      <Bar />
    </div>
  );
}

let initialized = false;

function Bar() {
    const [progressVal, setProgressVal] = useState(20);

    function increment() {
      console.log("increment", progressVal, progressVal + 10);
      setProgressVal(progressVal + 10);
    }

    useEffect(() => {
      if (!initialized) {   //tahle funkce se pokaždý zavolá 2x, ale já jí potřebuju mít zavolanou jen jenou. Další problém, se kterým dlouhodobě bojuju a řešení jsem zatím nenašel.
        initialized = true;
        setInterval(increment, 500);
      }
    }, []);

    return (
      <div className={cssStyle.bar} style={{ width: progressVal + "%" }}></div>
    );
  }

export default ProgressBarDiv;

Zkusil jsem: Zkoušel jsem různě do programu dávat debugovací výpisy, ale všechno se zdá být normální. Zkoušel jsem googlit, jestli tenhle problém nemělo víc lidí, ale nic jsem nenašel.

Chci docílit: Chci vyrobit komponent, který bude mít na spodním okraji progress bar. To se mi podařilo, jen bych ten progressbar rád rozpohyboval (takový demo).

Odpovědět

21.9.2022 1:12

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.