reactjs REACT JS，如何使用useLoaderData()react路由器删除数据而不刷新页面v6++

2exbekwf 于 2023-02-18 发布在 React

关注(0)|答案(1)|浏览(204)

我的目标是当我删除表中的一些数据时，它会阻止使用react-router-dom@6的新版本刷新userLoadData。我不知道如何做到这一点，我已经尝试询问CHATGTP，但他们给出的解决方案对我没有帮助。
我试过这个我创建了一些函数products()与内部useLoaderData，它的工作和删除数据，但问题是它不刷新当我删除。我需要刷新页面更新。
我将展示我已经尝试过的代码。这是我的组件Product和导出常量ProductData。

import { useLoaderData } from "react-router-dom";
import axiosClient from "../../../axios-client"

export const ProductData = () => {
  return axiosClient.get('admin/product')
    .then(({ data }) => {
      return data.data
    })
    .catch((error) => {
      return error
    })
}

export default function Product() {
  const products = () => {
    return useLoaderData()
  }

  const ProductDelete = async(id) => {
    await axiosClient.delete('admin/product/delete/'+id)
      .then((data) => {
        console.log(data)
        products()
      })
  }

  return (
    <div className="flex flex-col">
      <table className="min-w-full divide-y divide-gray-500">
        <thead className="bg-red-500">
          <tr>
            <th>id</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200">
          {products() && products().map((product) => (
            <tr key={product.id}>
              <td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
                <button onClick={()=>ProductDelete(product.id)}>Delete</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

这是我的路由器

import Product, { ProductData } from "./components/admin/product/IndexProduct"

const router = createBrowserRouter([
  {
    path: "product",
    element: <Product />,
    loader: ProductData
  }
]);

reactjs

来源：https://stackoverflow.com/questions/75483850/react-js-how-to-delete-data-without-refreshing-page-using-useloaderdata-react

1条答案

按热度按时间

nmpmafwu1#

基本要点是，您还应该提供一个发出DELETE请求的路由action，它将触发Route重新验证自身，并调用loader和重新获取更新的数据。
示例：

import { useLoaderData } from "react-router-dom";
import axiosClient from "../../../axios-client"

export const productsLoader = async () => {
  try {
    const { data } = await axiosClient.get('admin/product')
    return data.data;
  } catch (error) {
    return error;
  };
};

export const deleteProductAction = async ({ request }) => {
  const formData = await request.formData();
  const id = formData.get("productId");
  axiosClient.delete(`admin/product/delete/${id}`);
};

导入Form组件并 Package 删除按钮以提交表单并触发表单/路由操作。下面使用一个隐藏的表单字段来"注入"您要使用的产品ID。

import { Form, useLoaderData } from "react-router-dom";

export default function Product() {
  const products = useLoaderData();

  return (
    <div className="flex flex-col">
      <table className="min-w-full divide-y divide-gray-500">
        <thead className="bg-red-500">
          <tr>
            <th>id</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200">
          {products.map((product) => (
            <tr key={product.id}>
              <td className="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
                <Form method="delete" replace>
                  <input name="productId" defaultValue={product.id} hidden />
                  <button type="submit">Delete</button>
                </Form>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

导入loader和action函数并将它们添加到"/product"路由

import Product, {
  deleteProductAction,
  productsLoader
} from "./components/admin/product/IndexProduct"

const router = createBrowserRouter([
  {
    path: "product",
    element: <Product />,
    loader: productsLoader,
    action: deleteProductAction,
  }
]);

使用"www.example.com" API进行演示。https://jsonplaceholder.typicode.com/" APIs.

赞(0）回复(0）举报 2023-02-18

我来回答

reactjs REACT JS，如何使用useLoaderData()react路由器删除数据而不刷新页面v6++

1条答案

相关问题

热门标签

最新问答