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

【问题标题】：(React Hooks): one setstate is not working, but double setstate is working?（React Hooks）：一个 setstate 不工作，但双 setstate 工作？
【发布时间】：2020-07-10 12:36:36
【问题描述】：

这是我的代码：

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) 它的工作，加载状态现在是“假”。像这样：

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 工作？

【问题讨论】：

如果你使用 try catch 块会发生什么？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@JuniusL。好的，我会试试的。
@JuniusL。没有错误。
在 useEffect 中，我试图不传递第二个参数。它的工作，但为什么？ useEffect(() => { }, [])
它会导致一个循环，每次users更改useEffect被调用，你不应该把它作为一个依赖。

标签： reactjs async-await react-hooks use-effect react-state

【解决方案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>
              );
            }

【讨论】：