javascript - 关于用户通过单击按钮触发的 React Hooks 和 AJAX 调用的困境

Question

我在如何正确实现以下(基本)功能方面面临两难境地。

我有一个带有按钮的简单 React 组件，当用户按下按钮时，将触发对 REST 服务器的 AJAX 调用，然后将结果显示给用户。

我的组件类似于以下内容:

function MainComponent() {
    const [data, setData] = useState(null);

    async function getData() {
        const response = await fetch(...);
        setData(response);
    }

    return (
        <div>
            <button type="button" onClick={getData} />
            <div>
                {data}
            </div>
        </div>
    );
}

我想添加一个加载微调器，因为 fectch 调用可能需要一段时间，这就是怀疑开始的时候。如何正确处理加载微调器的可见性状态？

function MainComponent() {
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(false);

    async function getData() {
        setIsLoading(true);
        const response = await fetch(...);
        setIsLoading(false);
        setData(response);
    }

    return (
        <div>
            <button type="button" onClick={getData} />
            { isLoading ?
                    <span>Loading...</span>
                :
                    null
            }
            <div>
                {data}
            </div>
        </div>
    );
}

类似上面的代码可以工作，但我觉得它不正确。

第二次调用 setIsLoading，等待 fetch 请求结束后的调用，据我所知，应该不起作用(但确实如此)。

让我解释一下为什么我认为它应该不有效:

1. 渲染组件

2. 用户按下按钮，调用 setIsLoading(true) 完成，在某个时候它会触发重新渲染。

3. 重新渲染发生了，指向函数 setIsLoading 的“指针”应该(或可能不会)改变，因为 useState Hook 由于以下原因再次被调用重新渲染

4. 获取后对 setIsLoading(false) 的调用(以及对 setData 的调用)应该会影响组件的旧版本

我错了吗？如果是，为什么？如果我对 React Hooks 的理解是正确的，我该如何以正确的方式实现这个简单的用例？ (也许使用 useEffect？)

非常感谢

编辑:

@Brad Ball 建议使用useEffect，但是函数执行之间重新渲染n 的问题仍然存在。 我如何确定 setIsLoading(true); 之后的重新渲染保持所有指向函数的指针正确？ 为什么它与之前的调用不同？

function MainComponent() {
    const [data, setData] = useState(null);

    const [request, setRequest] = useState(undefined);
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        fetchData();
    }, [request]);

    async function fetchData() {
        setIsLoading(true);
        const response = await fetch(request.url, ...);
        setIsLoading(false);
        setData(response);
    }

    function getData() {
        setRequest({
            url: '...',
            body: '...'
        })
    }

    return (
        <div>
            <button type="button" onClick={getData} />
            { isLoading ?
                    <span>Loading...</span>
                :
                    null
            }
            <div>
                {data}
            </div>
        </div>
    );
}

编辑 2:

感谢您的回答:问题不在于编码，而在于如何正确地进行编码。如何在异步函数中处理多个 setState，以便在函数仍在运行时触发重新渲染？我的只是用例的一个例子

Answer 1

您的代码看起来不错。使用 useState 可确保您的组件在调用时引用正确的值和 setter 。

就担心重新渲染的确切顺序等而言，您不应该关心什么时候渲染什么。 React 代码应该是声明性的——你的代码描述了最终结果应该是什么，而不是如何到达那里。就您的具体情况和顾虑而言，重新渲染的时间不受您的控制，因为状态更新(和可能的重新渲染)是为了优化目的而分批处理的。

Dan Abramov关于多个 setState 调用有这样的说法:

In current release, they will be batched together if you are inside a React event handler. React batches all setStates done during a React event handler, and applies them just before exiting its own browser event handler.

我假设类似的东西适用于钩子(Hook)的情况，但不确定这一点。