如何在 RTK 查询中的 POST 后导航到更新/详细信息页面

Question

我在 REACT RTK 查询中有一个带有 POST 的表单，然后它应该导航到第二步，但为此我需要知道新创建记录的 ID。 id 不是在 POST 中发送的，而是在后端自动递增的。 我不想直接导航到列表视图来获取该 id。

const [addMyModel] = useNewMyModelMutation();
const handleSubmit = (e: { preventDefault: () => void; }) => {
    e.preventDefault();
    const my_model = {
        "user_id": user_id, 
        "date_time_field": new Date(),
        "icm": icmChoice,
        ...
    };
    
    dispatch(setUniqueFilters(unique_filters))
    //localStorage.setItem('unique_filters', JSON.stringify(unique_filters))
    //localStorage.setItem('selection_positions', JSON.stringify(positions))
    //localStorage.setItem('my_model', JSON.stringify(my_model))
    addMyModel(my_model)
    push(`/icm/mymodels/list`) // push(`/icm/mymodels/${answer_question}`);

最好的解决方案是什么？

• 尝试在 POST（Django Rest Framework）之后从后端发送 id 作为响应，
• 更改后端中的主键，这样我就会知道 handleSubmit 之前的 id（之前做过但忘记了我将所有内容都设置回来的原因。）
• 将 step1 保存在 localStorage 中（但是更新之前的记录会有问题），
• 将 step1 保存在 state 中（但我无法刷新）

Answer 1

这很简单，但前提是您的 API 在 POST 响应中返回新创建的项目（这是 RESTfull API 所期望的）。 如果是这样 - 只需等待钩子的回答：

const data = await addMyModel(my_model).unwrap()
// id should be in `data`

考虑到突变“触发器”function 返回 Promise，您可以像往常一样使用它：

addMyModel(my_model).then(newItem => {
  if ("data" in newItem) {
    const expectedId = item.data.id;
    // use you expectedId
 }
});

Answer 2

const [addMyModel, result] = useNewMyModelMutation();
...
const handleSubmit = (e: any) => {
e.preventDefault();
const my_model = {
    "user_id": user_id, 
    "date_time_field": new Date(),
    "icm": icmChoice,
    ...
};
addMyModel(my_model)}

result.status === "fulfilled" && push(`/icm/mymodels/update/step2/${result.data["id"]}`)