reactjs - 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

您必须将搜索查询存储到 a 中state variable并useMemo与此变量一起使用来计算过滤后的数据。

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

  return (...)
}