小编J. *_*ets的帖子

我正在努力找出在我的 Ionic + Capacitor 移动应用程序中处理大型、长时间运行的上传的最佳方法。

具体来说，我大约同时将几十张照片（约 30 多张）上传到 Firebase 存储，并将一个或多个视频（1-2 分钟）上传到 Vimeo。用户甚至可以同时运行多批上传（用户可以选择何时进行上传）。在良好的连接情况下，整个上传过程需要不到 1 分钟，但我必须考虑到缓慢/不稳定的连接，以及用户在线和离线的情况。

当应用程序位于前台时，上传工作非常完美，但当用户在上传过程中退出或完全关闭应用程序时，问题就会出现。我没有可靠的机制来确保我的上传继续运行。

我目前正在使用 Capacitor v2，因此我尝试使用该BackgroundTask插件来尽可能长时间地保持上传，但事实证明这是不可靠的。

https://capacitorjs.com/docs/v2/apis/background-task

const uploadPromises = []; // Array of promises used to track each individual upload

// Start uploading things, adding each unresolved upload to 'uploadPromises'

const { isActive } = listenForCapacitorAppStateChange(); // This is a redux-saga emitter

if (!isActive) {
    const taskId = BackgroundTask.beforeExit(async () => {
        // Use the background task to wait for all upload promises to resolve …

我想知道在使用工厂生成回调时，如何最好地在 React 中返回记忆化的回调函数。目标是在使用相同参数调用工厂时返回相同的函数实例。

例如：

function MyComponent() {
    // This will always return a new function
    const makeCallback = param => () => {
        /* perform action with 'param' */
    };

    return (
        <>
            <Button onClick={makeCallback('foo')} />
            <Button onClick={makeCallback('bar')} />
            <Button onClick={makeCallback('baz')} />
        </>
    );

我不相信用 useCallback 包装工厂本身会提供任何好处，因为该函数实际上并没有传递给任何孩子，所以我的想法是从工厂返回一个 useCallback 函数。

像这样：

const makeCallback = param => React.useCallback(
    () => {
        /* perform action with 'param' */
    },
    [param]
);

但是，这是不允许的，并且在构建时失败了。

React Hook "React.useCallback" is called in function "makeCallback" which is neither …