Wielokrotny strzał do api w React i Axios

Question

Cześć. Mam taki kod w komponencie funkcyjnym:

    const [info1, setInfo1] = useState('Loading...');
    const [info2, setInfo2] = useState('Loading...');
    const [info3, setInfo3] = useState('Loading...');
    const [info4, setInfo4] = useState('Loading...');
    const [info5, setInfo5] = useState('Loading...');

    axios.get('api/info')
        .then(({ data }) => {
            const { info1, info2, info3, info4, info5 } = data[0];

            console.log('Strzał do api');

            setInfo1(info1)
            setInfo2(info2)
            setInfo3(info3)
            setInfo4(info4)
            setInfo5(info5)
        });

Problem polega na tym, że console.log() wykonuje się 7 razy. Ktoś pomoże?

Comments

A ile razy używasz ten komponent?

Przy okazji, tego typu akcje - jak wykonanie kodu przy inicjacji komponentu - lepiej wykonywać w useEffect.

---

Kompletnie zapomniałem o tym hooku. Wrzuciłem wszystko w useEffect, do tego dodałem pustą tablicę jako drugi argument i już kod wykonuje się jeden raz. Dziękuję!

---

Spoko, ale czy ten komponent jest używany raz, czy wiele razy?

---

Tylko 1 raz

---

@ScriptyChris, masz na myśli użycie useContext w przypadku gdyby komponent był używany wielokrotnie?

---

Dlaczego wrzuciłeś pustą tablicę jako drugi argument w useEffect ?

---

Aby useEffect wykonywał się tylko przy pierwszym renderowaniu komponentu

Answer 1

https://www.youtube.com/watch?v=k0WnY0Hqe5c

https://www.youtube.com/watch?v=lbHuwpPwfoc

https://www.youtube.com/watch?v=0ZJgIjIuY7U

Przyda Ci się

Pozdrawiam Serdecznie

Comments

Dwa razy ten sam link podałeś.

---

Poprawione ;)

Powodzenia