remix.run - 混音运行 - 提交操作并收到错误 "root"- 没有操作，但您正在尝试提交给它

Question

我在 remix run 中派发我的 action 时遇到了一些麻烦 - 我有一个 Aside，其中包含我购物车中的所有数据 - 我有一个表格可以整理所有数据 - 以及我想要结帐的时间待创建我想调用该操作

<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

长话短说;

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

详情

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

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

action="/products?index"

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

一旦我将 ?index 部分添加到操作中，一切都按预期进行。

根据混音文档:

If you want to post to an index route use ?index in the action: action="/accounts?index" method="post" />

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

另外请注意，大多数时候您可以停止操作，表单将使用呈现它的路径。