React注册组件优化：实现输入停止触发函数+控制loadData仅执行一次

要实现loadData()仅在组件挂载时执行一次，同时保持用户停止输入name后触发getData()的防抖逻辑，你可以拆分两个独立的useEffect：

• 第一个useEffect：使用空依赖数组，仅在组件首次挂载时调用loadData()
• 第二个useEffect：依赖name状态，专门处理输入防抖后的getData()请求

修改后的完整代码 #

import { useState, useEffect, useCallback } from 'react';
import { Box, TextField } from '@mui/material';

export default function Registration() {
  const [fatherName, setFatherName] = useState('');
  const [motherName, setMotherName] = useState(''); // 修正变量名大小写，保持一致性
  const [name, setName] = useState('');

  // 用useCallback包裹，避免组件重渲染时创建新函数实例
  const loadData = useCallback(() => {
    getCompliance().then((data) => {
      if (data && data.success) {
        // do something
      } else {
        console.log("Data fetching is not success");
      }
    });
  }, []); // 空依赖，确保函数引用稳定

  // 仅在组件挂载时执行一次loadData
  useEffect(() => {
    loadData();
  }, [loadData]);

  // 处理name变化后的防抖请求
  useEffect(() => {
    const getDataTimeout = setTimeout(() => {
      if (name !== '') {
        getBusinessData(name).then((data) => {
          if (data) {
            setFatherName(data.data.fatherDetails);
            setMotherName(data.data.motherDetails);
          } else {
            console.log("Data fetching is not success or data not available");
            setFatherName('');
            setMotherName('');
          }
        });
      } else {
        setFatherName('');
        setMotherName('');
      }
    }, 1000);

    return () => clearTimeout(getDataTimeout);
  }, [name]);

  return (
    <Box component="form" sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' } }} noValidate autoComplete="off">
      <TextField 
        id="outlined-name" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        label="Name" 
      />
      <TextField 
        id="outlined-father-name"
        value={fatherName}
        name="fatherName"
        label="Father's Name"
        disabled // 可选：如果是自动填充，设置为禁用避免手动修改
      />
      <TextField 
        id="outlined-mother-name"
        value={motherName}
        name="motherName"
        label="Mother's Name"
        disabled // 可选：如果是自动填充，设置为禁用避免手动修改
      />
    </Box>
  );
}

关键改动说明 #

1. 拆分useEffect：将原有的单个useEffect拆分为两个，分别负责初始化数据加载和输入防抖逻辑，职责更清晰
2. loadData的稳定性：用useCallback包裹loadData，确保其函数引用在组件重渲染时保持不变，避免空依赖useEffect的不必要触发
3. 变量名一致性：修正了MotherName为motherName，符合JavaScript小驼峰命名规范
4. 可选优化：为自动填充的输入框添加disabled属性，避免用户手动修改自动填充的内容（根据业务需求调整）

内容的提问来源于stack exchange，提问作者aji bala