如何在 Remix 中触发多个动作？

Question

我的用例是聊天应用程序的命令栏。

单个命令可能需要调用多个操作。

我今天所做的伪代码是这样的......

const fetcher = useFetcher();

useEffect(() => {
  const commands = [
    {
      name: "delete-every-chat",
      onSelect: () => {
        for (const chat of chats) {
          const formData = new FormData();

          fetcher.submit(formData, {
            action: getPath('/api/chat/:uid/delete', {
              uid: chat.uid,
            }),
            method: 'post',
          });
        }
      },
    },
  ];

  // ...
});

但是，似乎这种共享

fetcher

的方式会导致并不是每个POST请求都完成的情况。

此外，似乎没有办法从操作中获得响应。

正确的做法是什么？

Answer 1

这里最主要的是了解操作和获取器是如何工作的。单个路线上的操作一次只能运行一个。

更好的方法是使用 fetcher 提交所有数据，并在操作中迭代它。使用您的示例并使其变得简单（为了简洁起见，我仅包含聊天内容）：

const fetcher = useFetcher();

useEffect(() => {
  if (name === "delete-every-chat") {
    fetcher.submit({type: "deleteAll", chats}, {method: "POST"})
  }
}, [name]);

然后，在你的action中你会看到这样的东西：

export async function action({request}) {
  const data = request.formData()
  const type = data.get("type")
  const chats = data.get("chats")

  if (type="deleteAll") {
    chats.forEach((chat) => {
      //....Delete chat here.....
    }
    return {deleted: true}
  }
  
  return null
}

另一个注意事项，这里我将

deleted

返回为

true

，以从您需要使用 useActionData().

的操作中获取响应。

const actionData = useActionData()

if (actionData.deleted) {
  //Handle change
}