在列表之间切换时重置过滤器值

如何解决在列表之间切换时重置过滤器值

我有一个包含多个列表资源的 react-admin 应用，并且只想在我在列表之间切换（在公司/规则/查找之间切换）时清除过滤器。目前，我正在为每个列表（RuleFilter 部分）使用 RuleList.js 中显示的解决方案。但是，每次显示/编辑列表中的元素时，这也会重置过滤器。我不知道是否有一种方法可以检测您何时在公司/规则/查找之间单击以清除过滤器。

App.js

import * as React from "react"
import { Admin,Resource } from 'react-admin'

import dataProvider from './dataProvider'

import companies from './companies'
import rules from './rules'
import lookups from './lookups'

const App = () => (
  <Admin
    dataProvider={dataProvider}>
    <Resource name="companies" {...companies} />
    <Resource name="rules" {...rules} />
    <Resource name="lookups" {...lookups} />
  </Admin>
)

export default App

RuleList.js

import React,{ useState,useEffect } from 'react'
import { List,Datagrid,TextField,EditButton } from 'react-admin'

const RuleFilter = (props) => {
  useEffect(() => {
    const { setFilters } = props
    return () => setFilters({ regex: '' })
  },[])

  return (
    <Filter {...props}>
      <TextInput label="Search" source="regex" alwaysOn />
    </Filter>
  )
}

const RuleList = (props) => {    
  return (
    <List {...props}
      filters={<RuleFilter />}
      exporter={false}>
      <Datagrid rowClick="edit">
        <TextField source="id" />
        <TextField source="regex" />
        <EditButton />
      </Datagrid>
    </List>
  )
}

export default RuleList

用于规则的 index.js

import RuleList from'./RuleList'
import RuleEdit from './RuleEdit'
import RuleCreate from './RuleCreate'

const rules = {
  list: RuleList,edit: RuleEdit,create: RuleCreate,}

export default rules

Clear the search field when clicking companies or rules

解决方法

使用 redux-persist，并将过滤器保存在 Store 中，或
使用 localStorage 保存您的过滤器