Question

这是我的代码：

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”。

如果我使用double 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起作用？

Answer 1

在map方法中，您正在读取整个对象作为名称，而应该读取一个属性user = {user.login}
在调用getUsersData（）之后调用setLoading（false）
无需使用useEffect用户依赖项

这是工作代码

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>
              );
            }

（React Hooks）：一个setstate不起作用，但是double setstate起作用吗？

1 个答案: