（React Hooks）：一个 setstate 不工作，但双 setstate 工作？

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

如果我使用双 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)
在使用中不需要用户依赖

这是工作代码

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 不工作，但双 setstate 工作？

(React Hooks): one setstate is not working, but double setstate is working?

reactjs

async-await

react-hooks

use-effect

react-state