Question

对于我有多个表都需要搜索栏的项目，我创建了一个自定义挂钩来过滤表行。

这是我的自定义过滤钩子代码：

import React from 'react'
import { matchSorter } from 'match-sorter'

const useFilterData = (searchValue, keyList, data) => {
  const [filteredList, setFilteredList] = React.useState(data)
  React.useEffect(() => {
    if (searchValue) {
      const filtered = matchSorter(data, searchValue, {
        keys: keyList,
      })
      setFilteredList(filtered)
    } else {
      setFilteredList(data)
    }
  }, [searchValue])

  return [filteredList]
}

export default useFilterData

这是表格代码的片段

const data = [{}, {}, {}] // this is a list of objects
const columns = [{'field': 'one'}, {'field': 'two'}, {'field': 'three'}]
const columnKeys = columns.map((c) => c.field)
const [searchValue, setSearchValue] = React.useState('')
const [filteredList] = useFilterData(
    searchValue,
    columnKeys,
    data,
  )

  return (
    <div>
      <Paper>
        <TextField onChange={(e) => setSearchValue(e.target.value)} />
        <DataGrid
          rows={filteredList}
          columns={columns}
        />
      </Paper>
    </div>
  )
}

当首次呈现filteredList 时，它始终是一个空列表，一旦您进行搜索，然后清除搜索值，数据就会正确显示。除了第一次渲染中返回的内容外，搜索按我希望的方式工作。我试过像这样使用 useEffect

React.useEffect(() => {
    setFilteredList(data)
}, [data])

但这让我陷入了无限循环。我还尝试在 if 语句中更加明确，

if (searchValue !== '')

这也没有改变任何东西！

我是钩子的新手，所以我希望我错过了一些简单的东西。谢谢。

编辑：仍在尝试的东西，我已经缩小了我认为的问题

  console.log(data)
  const [filteredList, setFilteredList] = React.useState(data)
  console.log(filteredList)
  React.useEffect(() => {
    setFilteredList(data)
  }, [])
  console.log(filteredList)

第一个控制台日志正确返回一些东西，最后两个总是返回一个空列表。

Answer 1

这将解决您的问题：

React.useEffect(() => {
    setFilteredList(data)
}, [])

React 自定义钩子在第一次渲染时返回一个空列表

1 个答案: