前端项目实战玖拾玖react-admin+material ui-踩坑-List的用法之filters解决过滤的问题

我是歌谣 这里是歌谣的前端笔记小屋 想加入前端巅峰人才交流群私信我

import { Link, Route, Routes, useNavigate } from "react-router-dom";
import { Admin, CustomRoutes, Layout, LayoutProps, ListGuesser, Resource, fetchUtils } from "react-admin";
import postgrestRestProvider, { IDataProviderConfig, defaultPrimaryKeys, defaultSchema } from '@raphiniert/ra-data-postgrest';
import { Collapse, Grid, ListItem, ListItemText, Paper, List } from "@material-ui/core";
import { RListData } from "./RServer/data";
import RFirst from "./RFirst";
import { RActionList } from "./RActionList";
import { RAasideList } from "./RAasideList";
import { RChildrenList } from "./RChildrenList";
import { RAasideFilterList } from "./RAasideFilterList";
import RComponentList from "./RComponentList";
import REmptyList from "./REmptyList";
import { RFiltersList } from "./RFiltersList";
 
const config: IDataProviderConfig = {
  apiUrl: '/postgrest',
  httpClient: fetchUtils.fetchJson,
  defaultListOp: 'eq',
  primaryKeys: defaultPrimaryKeys,
  schema: defaultSchema
}
const baseDataProvider = postgrestRestProvider(config);
const dataProvider = {
  ...baseDataProvider,
  //可以在这里添加越过dataProvider的数据访问
 
}
const appBar = (props: any) => {
  return (
    <></>
  )
}
const useAppMenu = () => {
  return (<></>)
}
const mySidebar = () => {
  return (<></>)
}
const appLayout = (props: LayoutProps) => {
  return (
    <Layout
      sx={
        {
          '& .RaLayout-appFrame': {
            minHeight: '100%',
            height: '100%',
            margin: 0,
            padding: 0
          },
          '& .RaLayout-content:': { marginTop: 0, marginBottom: 0, padding: 0, minHeight: '100%', height: '100%' },
          '& .RaLayout-contentWithSidebar': { margin: 0, padding: 0, minHeight: '100%', height: '100%' },
          minHeight: '100%',
          height: '100%',
          margin: 0,
          padding: 0,
        }
      }
      {...props}
      appBar={appBar}
      menu={useAppMenu}
      sidebar={mySidebar}
    />
  )
}
const RList = () => {
  const navigate = useNavigate();
  const handleLinkTo = () => {
    navigate('mySecondPage/');
  }
  const handleClickStyle = (dataUrl: any) => {
    const url = `${dataUrl}/`
    navigate(url)
    // setOpen(!open);
  };
  return (
    <div>
      <Grid style={{ margin: 0, padding: 0, display: "flex" }} >
        <Grid style={{ width: "200px", margin: "24px 0 0 24px" }} >
          <Paper>
            {RListData && RListData.map((item: any, i) => (
              <List style={{ margin: "0px 0px 0 24px" }} component="div">
                <ListItem button onClick={() => handleClickStyle(item.path)}>
                  <ListItemText primary={item.name} />
                </ListItem>
              </List>
            ))}
          </Paper>
        </Grid>
        <Grid style={{ flexGrow: "1", margin: "24px 0 0 24px" }} >
          <Admin
            dataProvider={dataProvider}
            basename='/rlist'
            layout={appLayout}
          >
            <Resource name='t_geyao_person' list={RFirst} />
            <CustomRoutes>
              <Route path="basic/" element={<RFirst />} />
              <Route path="actions/" element={<RActionList />} />
              <Route path="aside/" element={<RAasideList />} />
              <Route path="asideFilter/" element={<RAasideFilterList/>} />
              <Route path="children/" element={<RChildrenList />} />
              <Route path="component/" element={<RComponentList />} />
              <Route path="empty/" element={<REmptyList />} />
              <Route path="filter/" element={<RFiltersList />} />
            </CustomRoutes>
          </Admin>
        </Grid>
      </Grid>
 
    </div>
  )
}
 
export default RList;