(React Hooks): одно заданное состояние не работает, но двойное заданное состояние работает? - PullRequest
Новая
       33

(React Hooks): одно заданное состояние не работает, но двойное заданное состояние работает?

0 голосов
/ 30 марта 2020

это мой код: 

function Users() {

    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {

        const getUsersData = async () => {
            setLoading(true);

            const response = await fetch('https://api.github.com/users');
            const data = await response.json();

            setUsers([...data]);

            setLoading(false);
        }

        getUsersData();

    }, [users])

    return (
        <div className="container my-4">
            <div className="row">
                {loading ? (
                    <p>loading...</p>
                ) : (
                    users.map((user) => <UserItem key={user.id} user={user}/>)
                )}
            </div>
        </div>
    )
}

после setUsers, setLoading (false) не работает.

в инструментах разработчика chrome, состояние загрузки по-прежнему "true", не " false ".

, если я использую его двойной setLoading (false), состояние загрузки теперь равно" false ". вот так: 

useEffect(() => {

        const getUsersData = async () => {
            setLoading(true);

            const response = await fetch('https://api.github.com/users');
            const data = await response.json();

            setUsers([...data]);

            setLoading(false);
            setLoading(false);
        }

        getUsersData();

    }, [users])

почему 1 setLoading не работает, а 2 setLoading работает?

1 Ответ

1 голос
/ 30 марта 2020
  1. в методе map вы читаете весь объект как имя, вместо этого вы должны прочитать одно свойство user = {user.login}
  2. вызывать setLoading (false) после вызова getUsersData ()
  3. в использовании. Влияние пользователей не требуется

здесь работает код 

function App() {

              const [users, setUsers] = useState([]);
              const [loading, setLoading] = useState(false);

              useEffect(() => {
                const getUsersData = async () => {
                  setLoading(true);

                  const response = await fetch("https://api.github.com/users");
                  const data = await response.json();

                  setUsers([...data]);
                };
                getUsersData();
                setLoading(false);
              }, []);

              return (
                <div className="container my-4">
                  <div className="row">
                    {loading ? (
                      <p>loading...</p>
                    ) : (
                      users.map(user => <UserItem key={user.id} user={user.login} />)
                    )}
                  </div>
                </div>
              );
            }
...