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

Question

我有一个具有多个列表资源的 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

Answer 1

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