使用混音运行将数据发送到服务器

Question

我正在使用混音运行将数据发送到服务器的问题 - 我不确定我完全了解使用方法数据的工作方式。我了解USELOADERDATA功能的工作方式，但是当您尝试将数据发送到服务器时，我会遇到错误。

我想做的是在单击按钮时将帖子请求发送到我的服务器 - 如果我尝试在Handleclick事件中调用Create Cart，则说CreateCart在似乎

const submit = useSubmit()

 function action({ request }) {
  is this where i do my POST api call?

}

async function handleClick(event) {
    await createCart(id, amount)
  }

找不到任何可以告诉您的文档 时，不是一个函数如何做？

Answer 1

通过混音，操作总是在服务器上运行。这是当您发布路线时，混音将调用的方法。

// route.tsx

import { json, type ActionArgs, type LoaderArgs } from '@remix-run/node'
import { Form, useActionData, useLoaderData, useSubmit } from '@remix-run/react'
import { createCart } from '~/models/cart.server' // your app code
import { getUserId } from '~/models/user.server' 

// loader is called on GET
export const loader = async ({request}: LoaderArgs) => {
  // get current user id
  const id = await getUserId(request)
  // return
  return json({ id })
}

// action is called on POST
export const action = async ({request}: ActionArgs) => {
  // get the form data from the POST
  const formData = await request.formData()
  // get the values from form data converting types
  const id = Number(formData.get('id'))
  const amount = Number(formData.get('amount'))
  // call function on back end to create cart
  const cart = await createCart(id, amount)
  // return the cart to the client
  return json({ cart })
}

// this is your UI component
export default function Cart() {
  // useLoaderData is simply returning the data from loader, it has already
  // been fetched before component is rendered. It does NOT do the actual 
  // fetch, Remix fetches for you
  const { id } = useLoaderData<typeof loader>()
  // useActionData returns result from action (it's undefined until
  // action has been called so guard against that for destructuring
  const { cart } = useActionData<typeof action>() ?? {}
  // Remix handles Form submit automatically so you don't really
  // need the useSubmit hook
  const submit = useSubmit()
  const handleSubmit = (e) => {
    submit(e.target.form)
  }
  return (
    <Form method="post">
      {/* hidden form field to pass back user id *}
      <input type="hidden" name="id"/>
      <input type="number" name="amount"/>
      {/* Remix will automatically call submit when you click button *}
      <button>Create Cart</button>
      {/* show returned cart data from action */}
      <pre>{JSON.stringify(cart, null, 2)}</pre>
    </Form>
  )
}