React多组件状态管理及输入框重渲染失焦问题求助

核心问题分析 #

输入框失去焦点的本质是组件被重复销毁重建：

• 你给SearchCondition组件的key用了${cond.condition}-${Math.random().toString()}，Math.random()每次渲染都会生成新值，React会把这当成全新组件，删掉旧组件重新渲染，直接导致焦点丢失。
• 另外cond.condition可能为空，也会引发key重复，同样会触发组件重建。

分步解决方案 #

1. 给每个条件项添加唯一ID

先修改ConditionFormData类型，加入唯一标识id，确保每行的key稳定：

export type ConditionFormData = {
  id: string; // 新增唯一ID字段
  condition: string;
  operator: string;
  value: string;
};

2. 生成稳定的key

在自定义hook的addNewRow方法里，生成唯一id（不用额外装依赖的话，用时间戳+随机数组合即可）：

const addNewRow = () => {
  setConditionList((prev) => [
    ...prev,
    {
      id: Date.now().toString() + Math.random().toString(36).slice(2), // 生成唯一ID
      condition: '',
      operator: '',
      value: ''
    }
  ]);
};

然后在ConditionForm的遍历逻辑里，改用cond.id作为组件key：

{conditionList.map((cond: ConditionFormData, index) => (
  <SearchCondition
    key={cond.id} // 改用稳定的唯一ID
    index={index}
    conditionRow={cond}
    onChange={(updatedCondition) => handleRowChange(index, updatedCondition)}
    onDelete={() => handleDeleteRow(index)}
  />
))}

3. 优化state更新逻辑

用函数式更新获取最新state，避免闭包导致的state过时问题：
修改handleRowChange：

const handleRowChange = (index: number, updatedCondition: ConditionFormData) => {
  setConditionList(prev => {
    const updatedRows = [...prev];
    updatedRows[index] = updatedCondition;
    return updatedRows;
  });
};

修改handleDeleteRow：

const handleDeleteRow = (index: number) => {
  setConditionList(prev => {
    const updatedRows = [...prev];
    updatedRows.splice(index, 1);
    return updatedRows;
  });
};

4. 减少不必要的重渲染（可选）

用React.memo包裹SearchCondition，避免父组件重渲染时无意义的子组件更新：

import { memo } from 'react';

// ... 组件原有代码

export default memo(SearchCondition);

同时在ConditionForm里用useCallback包裹传递给子组件的回调，确保props引用稳定：

import { useCallback } from 'react';

export default function ConditionForm({
  initialConditionList,
  onUpdateConditions,
  onCloseDialog
}: ConditionFormProps) {
  const { conditionList, addNewRow, handleRowChange, handleDeleteRow, handleApplyChanges } =
    useConditionForm(initialConditionList, onUpdateConditions);

  // 用useCallback包裹回调，保证引用稳定
  const handleRowChangeCallback = useCallback((index: number, updatedCondition: ConditionFormData) => {
    handleRowChange(index, updatedCondition);
  }, [handleRowChange]);

  const handleDeleteRowCallback = useCallback((index: number) => {
    handleDeleteRow(index);
  }, [handleDeleteRow]);

  return (
    // ... 其他代码
    <SearchCondition
      key={cond.id}
      index={index}
      conditionRow={cond}
      onChange={(updatedCondition) => handleRowChangeCallback(index, updatedCondition)}
      onDelete={() => handleDeleteRowCallback(index)}
    />
    // ... 其他代码
  );
}

解决逻辑说明 #

• 稳定的key让React识别到是同一个组件，不会销毁重建，输入框焦点自然能保持。
• 函数式更新避免了闭包导致的state过时问题，保证每次更新都基于最新的state。
• React.memo和useCallback减少了不必要的组件重渲染，提升性能的同时也避免了意外的焦点丢失。

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