useRemixFetcher

Hook useRemixFetcher thay thế cho useFetcher của remix trong việc submit form. Hook useRemixFetcher thuận tiện cho việc bắt event onSuccess và onError

Tham sô

• onError (tùy chọn): Callback được gọi khi có lỗi xảy ra trong quá trình fetch. Nhận vào đối tượng ActionError chứa thông tin về lỗi.
• onSuccess (tùy chọn): Callback được gọi khi fetch thành công và có dữ liệu trả về. Nhận vào đối tượng dữ liệu thành công từ ActionSuccess. action (tùy chọn): Hành động liên quan đến yêu cầu, có thể là đường dẫn hoặc hành động cụ thể (ví dụ: 'create', 'update', ...).

Giá trị trả về

• data: Dữ liệu fetch từ server.
• errors: Các lỗi (nếu có) từ server.
• errorMessage: Tin nhắn lỗi từ server (nếu có).
• loading: Trạng thái của yêu cầu fetch (true nếu đang trong quá trình fetch).
• submit: Hàm để gửi yêu cầu mạng với phương thức HTTP và dữ liệu được cung cấp.

Ví dụ

// Your code
...

export interface ModifyTodoPageProps {}

export const ModifyTodoPage: React.FC<ModifyTodoPageProps> = () => {
  const fetcher = useRemixFetcher<TodoEntity.Todo>({
    onSuccess(payload) {
      if (isNew) {
        navigate('/app/todos/' + payload._id);
        shopify.toast.show('Create todo successfully', { duration: 3000 });
      } else {
        shopify.toast.show('Update todo successfully', { duration: 3000 });
      }
    },
  });
  ...
// Your code
  return (
    <Page title={pageTitle} backAction={backAction} primaryAction={primaryAction}>
      <Layout>
        <Layout.Section>
          <Card>
            <FormLayout>
              {fetcher.errorMessage && (
                <Banner title="Error" tone="critical">
                  <Text as="p">{fetcher.errorMessage}</Text>
                </Banner>
              )}
              <TextField
                label="Title"
                value={title}
                onChange={setTitle}
                autoComplete="off"
                error={fetcher.errors?.find(error => error.field === 'title')?.message}
              />
              <TextField label="Description" value={description} onChange={setDescription} multiline={5} autoComplete="off" />
            </FormLayout>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
};

Ghi chú

• Hàm useRemixFetcher sử dụng useFetcher từ @remix-run/react để quản lý trạng thái và kết quả của yêu cầu fetch.
• submit được sử dụng để gửi yêu cầu mạng với phương thức và dữ liệu được cung cấp, sử dụng action nếu được cung cấp.
• Hook này hỗ trợ xử lý lỗi và xử lý dữ liệu thành công thông qua onError và onSuccess callback. Triển khai