React 自定義鈎子在第一次渲染時返回一個空列表

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)
}, [])