如何将React Class Component代码片段改写为Functional Component

第一步：补全缺失的导入 #

你当前代码未导入React核心hooks，在文件顶部添加以下代码：

import React, { useState, useEffect, useCallback } from 'react';

第二步：修改handleSearch方法 #

函数式组件的状态更新没有类组件setState的回调参数，结合你已配置监听query变化的useEffect，直接更新对应状态即可，useEffect会在query更新后自动触发请求，完全匹配原逻辑：

const handleSearch = (text) => {
  const formattedQuery = text.toLowerCase();
  const filteredData = _.filter(fullData, (user) => {
    return contains(user, formattedQuery);
  });
  // 替换原注释代码段
  setData(filteredData);
  setQuery(text);
};

建议将过滤后的变量重命名为filteredData，避免和状态变量data重名造成作用域混淆。

第三步：修复防抖失效问题（可选但推荐） #

当前makeRemoteRequest在每次组件渲染时都会重新生成，导致防抖逻辑失效，可通过useCallback包裹防抖函数解决，同时给query添加初始空字符串避免参数异常：

// 调整query初始值
const [query, setQuery] = useState('');

// 用useCallback包裹防抖函数，仅初始化一次
const makeRemoteRequest = useCallback(_.debounce((q) => {
  setLoading(true);
  getUsers(20, q)
    .then((users) => {
      setLoading(false);
      setData(users);
      setFullData(users);
    })
    .catch((error) => {
      setLoading(false);
      setError(error);
    });
}, 250), []);

// 调整useEffect，传递最新query参数
useEffect(() => {
  makeRemoteRequest(query);
},[query, makeRemoteRequest]);

这样可以彻底避免闭包陷阱导致的请求参数错误、防抖不生效的问题。

内容的提问来源于stack exchange，提问作者Samim Hakimi