Remix run - 提交操作并收到错误“root” - 没有操作，但您正在尝试提交它

Question

我在混音运行中调度操作时遇到了一些麻烦 - 我有一个旁白，其中包含我购物车中的所有数据 - 我有一个整理所有数据的表单 - 当我想要创建结帐时我想调用该操作

<Form action='/products' method="post">
                {cart.map((item, idx) => ( 
                <div key={idx}>
                <input readOnly value={item.product.id} type="hidden" name="id"/>
                <input readOnly value={item.quantity}  type="hidden" name="quantity"/>
                </div>

                ))}
                
                <button 
                className="mr-2 m"
                >              Add to Cart
                </button>
</Form>


export const  action: ActionFunction = async ({request}) => {
  // get the form data from the POST
  const formData = await request.formData()
  const id = formData.getAll('id')
  const quantity = formData.getAll('quantity')

  const newObj = id.map((data, index) => {
    
    return  { variantId: data, quantity: quantity[index] }

  } )

  

  const cart = await createCheckout(newObj)
  return cart
}

根据此处请求的数据生成了我的结帐 URL，因此我需要等待响应。当我提交时，我收到 405 错误，指出方法不允许

react_devtools_backend.js:4026 Route "root" does not have an action, but you are trying to submit to it. To fix this, please add an `action` function to the route

这是错误消息，但我似乎无法在文档中找到如何向路线添加操作函数？因为我发誓我已经在这样做了？

Answer 1

太棒了；

我遇到了同样的问题，并且能够通过更改我的操作网址以在末尾包含 ?index 来解决。

细节

我的“产品”文件位于 /products/index.tsx

为了让 remix 不认为我指的是 root，我必须使用以下操作路径：

action="/products?index"

仅仅action="/products"单独使用是行不通的。

当我将?index零件添加到动作中后，一切都按预期进行。

根据混音文档：

如果您想发布到索引路由，请在操作中使用 ?index：action="/accounts?index" method="post" />

有关更多详细信息，请参阅：https ://remix.run/docs/en/v1/api/remix#form

另请注意，大多数时候您可以忽略该操作，表单将使用渲染它的路径。