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 (...)
}

ReactJS useMemo 内部函数

ReactJS useMemo inside function

reactjs

react-usememo