shopify remix 循环提交

Question

我正在尝试使用 remix 为 shopify 导入模块，并获得以下功能：

export default function Index() {
    const submit = useSubmit();


    rows.forEach(async(row, index) => {
        console.log('row' + index);
        await submit(row, { replace: false, method: "POST" })
    });
}

和

export async function action({ request, params }) {
    console.log(new Date().getTime());
    return json({result:1});
}

我可以从console.log('row' + index);看到它正确地遍历所有行，但提交函数只运行一次，无论迭代有多少行。

Answer 1

在 forEach 中使用 async 这样的做法可能不会按您的预期工作。所有这些承诺都将同时解决，如果您希望它们一个接一个地解决，您需要使用 for..of 循环。

也就是说，Remix 将允许您运行并发操作。您遇到的问题是，如果数据有可能过时，这些并发操作将相互抵消。

这意味着如果您运行 5 个操作，并且所有操作都在同一毫秒内解决，那么其中 4 个操作将被取消是有道理的。文档比我解释得更好：

Remix 旨在处理向服务器提交的多个表单 有效地执行操作和并发重新验证请求。它确保 一旦有新数据可用，状态就会立即更新。 然而，Remix 还通过以下方式防范潜在的陷阱： 当其他操作引入时，避免提交过时的数据 竞赛条件。

文档中有一些图表可以帮助进一步解释这一点。

我刚才所说的所有内容的一个重要警告是，在现实情况下，例如将数据导入 Shopify，您应该将所有行提交到操作的单个对象。您很可能还应该使用队列（例如 bull + redis 或 Qstash）来分割行。这将防止您受到 Shopify 的费率限制，并且对您的用户来说会更好一些，因为他们不必在导入期间保持选项卡打开。