从事件处理程序更新 React“进度”的最佳实践

Question

我有一个 React 应用程序，我需要在其中完成一些事情：

• 单击按钮即可发布到 API。
• 启动进度指示器。
• 当 API 返回时，更新上下文提供程序中的状态。
• 停止进度指示器。
• 重定向至“主页”页面。

React 官方文档说，对于用户事件，例如按钮单击，我应该将逻辑保留在事件处理程序中。但是，状态更改将“批量”进行，并且进度指示器不会在 UI 中启动和停止 - 一切完成后，只会显示该设置的最后一个状态。

我尝试了一个 useEffect() 挂钩来触发数据状态更改。 （这是我的代码的有限子集。）

const [formData, setFormData] = useState({});
const [status, setStatus] = useState('isReady');

const onSubmitHandler = async (data: any) => {
    setFormData(data);
    setStatus('isLoading');
};

useEffect(() => {
    // Don't call API unless button is clicked.
    if (status !== 'isLoading') {
        return;
    }

    // Call API to login user, get user stuff, etc.

    // Update context provider with login and user info.

    // Set status to 'isLoaded'.

}, [status, formData]


useEffect(() => {
    // If status = 'isLoaded', redirect to Home.
}, [status]

这个问题是，一旦我更新了 Context Provider，它就会触发整个应用程序中的一系列重新渲染，并且在我的效果到达最后一条语句之前状态会被 reset 。

Answer 1

您的陈述：

在我的效果到达最后一条语句之前，状态会重置

没有意义。状态不会因重新渲染而重置。您需要详细解释如何设置组件。 我最好的猜测是，每当更高级别的上下文状态发生变化时，您的组件（作为某些组件层次结构的一部分）就会被重新创建。