Блог

Главная - Вопросы по программированию - Установщик useState не обновляет состояние при вызове в useEffect

Установщик useState не обновляет состояние при вызове в useEffect

#reactjs #use-state

#reactjs #use-state

Вопрос:

В значительной степени то, что написано в названии. Когда я console.log(репозитории), он возвращает пустой массив. Почему repos состояние не обновляется?

 import React, { useEffect, useState } from "react";
import axios from "axios";

export default () => {
  const [repos, setRepos] = useState([]);
  useEffect(() => {
    (async () => {
      try {
        let repo_lists = await axios.get(
          "https://api.github.com/users/Coddielam/repos"
          // { params: { sort: "created" } }
        );
        setRepos(repo_lists.data.slice(1).slice(-10));
        console.log(repo_lists.data.slice(1).slice(-10));
        console.log(repos);
      } catch (err) {
        setRepos([
          "Something went wrong while fetching GitHub Api./nPlease use the link below to view my git repos instead ",
        ]);
      }
    })();
  }, []);

  return (
    <div className="content">
      <h2>View my recent git repos:</h2>
      <ul>
        ...
      </ul>
    </div>
  );
};

Комментарии:

1. Поведение установки состояния является асинхронным по своей природе, поэтому оно не будет немедленно устанавливать состояние.

Ответ №1:

Ответ очень прост. Ваш useState обновляется.. поверьте мне. Причина, по которой вы не видите его, когда вы console.log() , потому SetRespos что это асинхронная функция.

По сути, когда вы объявляете функцию для обновления useState своего значения, react будет использовать ее как async функцию

ПРИМЕР

 const [example, setExample] = useState('');

useEffect(() => {
  
  setExample('Hello');
  console.log('I'm coming first'); // This will be executed first
  console.log(example); // This will come after this

}, [])

Вывод будет :

   I'm coming first
  // Blank Line

Но все равно ваш useState будет обновляться после этого. Если вы хотите это увидеть, сделайте это :

  useEffect(() => {

  console.log(respose); // This will give you the value
}, [respos])

Я использую отдельное useEffect значение для console.log() значения. В [] (массиве зависимостей) мы передаем respos , что просто означает, что useEffect он будет выполняться каждый раз respos , когда изменяется значение.

Подробнее об useStates and useEffects этом читайте в документации react

Ответ №2:

Обновления состояния являются асинхронными. Вы увидите их отражение только при следующем рендеринге. Если вы регистрируете состояние консоли сразу после вызова setState, оно всегда будет регистрировать текущее состояние, а не будущее состояние.

Вы можете регистрировать состояние в эффекте каждый раз, когда оно изменяется, и вы увидите, что оно меняется:

 useEffect(() => console.log(repos), [repos]);

Этот эффект будет вызван после применения обновления состояния.