Как поочерёдно выполнить setState запросы после выполнения предыдущего в React?

Question

[baroman4ik]

Есть fetch содержащий 4 setState функции и так как они асинхронные, то не дожидаясь выполнения начитает выполняться сделующий сетстейт, работа которого завязана на предыдущем. Подскажите пожалуйста как лучше дождаться выполнения предыдущего сетСтейта перед работой нового. Вот код:

React.useEffect(() => {
    (async () => {
      let data = await fetch("/arr").then((data) => {
        setThemes(data.json());
        setActiveTheme(() => Math.floor(themes.length / 2));
        setActivePlace(() => Math.floor(themes[activeTheme].subtopics.length/2))
        setIsLoad(() => false);
      });
    })();
  }, []);

Answer 1

[Александр]

React.useEffect(() => {
    (async () => {
        try {
            const themes = await fetch("/arr").then((data) => data.json());
            const activeTheme = Math.floor(themes.length / 2);
            const activePlace = Math.floor(themes[activeTheme].subtopics.length / 2);

            setThemes(themes);
            setActiveTheme(activeTheme);
            setActivePlace(activePlace);
        } finally {
            setIsLoad(false);
        }
    })();
}, []);

Comments

[Alexandroppolus]

try/catch/finally бы добавить (setIsLoad(false) - в finally)

[Александр]

Alexandroppolus, Точно, благодарю.

[baroman4ik]

Большое спасибо)