ReactJS useMemo内函数

Question

我的职能是：

const handleSearch = (event) => {
  const currentValue = event?.target?.value;
  const filteredData = searchTable(currentValue, originalData);
  setDataToTable(filteredData);
};

我尝试使用useMemo()来回溯filteredData的值，以便不执行searchTable函数，因为它很慢。我在handleSearch函数中尝试过这样的方法：

const filteredData = useMemo(() => searchTable(currentValue, originalData), [currentValue]);

但我得到的Hooks can only be called inside of the body of a function component信息是正确的。

我应该如何在我的案例中使用useMemo？

Answer 1

必须将搜索查询存储到state variable中，并使用useMemo与此变量一起计算筛选的数据。

function App() {
  const [query, setQuery] = useState();
  const filteredData = useMemo(() => searchTable(query, originalData), [query]);
  
  function handleSearch(event) {
    setQuery(event?.target?.value);
  }

  return (...)
}