我正在尝试从外部 API mui-datagrid 设置过滤器。我想从 mui QuickSearchToolbar 传递过滤器的值。在 Body raw 内部使用 Post 方法的外部 API 过滤器中:
example request in postman [here][1]:
https://pasteboard.co/fGf1rPTdVF8r.jpg
我想将值从 jsx 传递到内部 body raw('createdBy':{{Value}})并使用它调用 api 值并通过过滤器刷新数据网格。
我的 App.js :
import { Box, Container } from "@mui/material";
import { DataGrid, GridToolbarQuickFilter } from "@mui/x-data-grid";
import { useEffect, useState } from "react";
import { BASE_URL } from "../services/urls";
import jwtInterceptor from "../components/shared/jwtInterceptor";
const [searchInput, setsearchInput] = "";
const QuickSearchToolbar = () => {
return (
<Box
sx={{
p: 0.5,
pb: 0,
}}
>
<GridToolbarQuickFilter
quickFilterParser={(searchInput) => setsearchInput(searchInput)}
/>
</Box>
);
};
function App() {
const [pageState, setPageState] = useState({
isLoading: false,
data: [],
total: 0,
page: 0,
pageSize: 5,
});
const [columns] = useState([
{
field: "id",
headerName: "شناسه",
flex: 1,
minWidth: 120,
},
{
field: "httpMethod",
headerName: "متد درخواست",
flex: 1,
minWidth: 150,
},
{
field: "createdBy",
headerName: "نام شرکت",
filter: "agTextColumnFilter",
flex: 1,
minWidth: 150,
},
{
field: "uri",
headerName: "آدرس یو آر ال",
flex: 1,
minWidth: 500,
},
{
field: "responseBody",
headerName: "بدنه پاسخ",
flex: 1,
minWidth: 600,
},
{
field: "requestBody",
headerName: "بدنه درخواست",
flex: 1,
minWidth: 400,
},
{
field: "requestHeader",
headerName: "هدر درخواست",
flex: 1,
minWidth: 400,
},
{
field: "responseHeader",
headerName: "هدر پاسخ",
flex: 1,
minWidth: 400,
},
{ field: "requestTime", headerName: "زمان درخواست" },
{
field: "responseTime",
headerName: "زمان پاسخ",
},
{
field: "responseStatus",
headerName: "وضعیت پاسخ",
},
{
field: "responseException",
headerName: "خطا",
},
{ field: "createdAt", headerName: "زمان ایجاد" },
{ field: "updatedAt", headerName: "زمان بروز رسانی" },
{ field: "updatedBy", headerName: "کاربر بروز رسانی" },
]);
useEffect(() => {
const fetchData = async () => {
setPageState((old) => ({ ...old, isLoading: true }));
const response = await jwtInterceptor.post(
`${BASE_URL}log/thirdPartyServices/filter?page=${pageState.page}&size=${pageState.pageSize}`,
{
httpMethod: "POST",
createdBy: searchInput,
uri: null,
responseException: null,
responseStatus: null,
}
);
setPageState((old) => ({
...old,
isLoading: false,
data: response.data.content,
total: response.data.totalPages,
}));
};
fetchData();
}, [pageState.page, pageState.pageSize]);
return (
<Box>
<Container style={{ marginTop: 100, marginBottom: 100 }}>
<DataGrid
autoHeight
rows={pageState.data}
rowCount={pageState.total}
loading={pageState.isLoading}
rowsPerPageOptions={[10, 30, 50, 70, 100]}
pagination
page={pageState.page - 1}
pageSize={pageState.pageSize}
paginationMode="server"
onPageChange={(newPage) => {
setPageState((old) => ({ ...old, page: newPage + 1 }));
}}
onPageSizeChange={(newPageSize) =>
setPageState((old) => ({ ...old, pageSize: newPageSize }))
}
columns={columns}
components={{ Toolbar: QuickSearchToolbar }}
/>
</Container>
</Box>
);
}
export default App;