React TypeScript子组件ID无法传递给父组件的问题解决

问题定位 #

父组件生成ID传给子组件，点击子组件删除图标时ID无法正确传递，核心原因通常是事件绑定上下文丢失、ID未正确绑定到删除事件，或是循环渲染子组件时key值与ID不匹配导致的识别错误。

代码修复示例 #

先还原常见的问题代码场景，再给出修复方案：

原问题代码片段 #

父组件 Filter.tsx

import { useState } from 'react';
import FilterProps from './FilterProps';

const Filter = () => {
  const [filters, setFilters] = useState<{id: string; value: string}[]>([]);

  const addFilter = () => {
    const newId = `filter-${Date.now()}`;
    setFilters(prev => [...prev, {id: newId, value: ''}]);
  };

  // 原删除函数无法获取正确ID
  const removeFilter = () => {
    setFilters(prev => prev.filter(f => f.id !== ???));
  };

  return (
    <div>
      <button onClick={addFilter}>添加筛选</button>
      {filters.map(filter => (
        <FilterProps key={filter.id} filter={filter} onDelete={removeFilter} />
      ))}
    </div>
  );
};

export default Filter;

子组件 FilterProps.tsx

interface FilterProps {
  filter: {id: string; value: string};
  onDelete: () => void;
}

const FilterProps = ({ filter, onDelete }: FilterProps) => {
  return (
    <div>
      <input value={filter.value} onChange={(e) => {/* 省略输入逻辑 */}} />
      <span onClick={onDelete}>×</span>
    </div>
  );
};

export default FilterProps;

修复方案 #

方案1：父组件绑定ID到删除事件

// 父组件更新删除函数，接收ID参数
const removeFilter = (id: string) => {
  setFilters(prev => prev.filter(f => f.id !== id));
};

// 渲染子组件时，绑定当前filter的ID到onDelete
{filters.map(filter => (
  <FilterProps 
    key={filter.id} 
    filter={filter} 
    onDelete={() => removeFilter(filter.id)} 
  />
))}

方案2：子组件主动传递ID（更灵活）

修改子组件Props类型，让删除事件接收ID参数，子组件触发时主动传递：

// 子组件Props类型更新
interface FilterProps {
  filter: {id: string; value: string};
  onDelete: (id: string) => void;
}

// 子组件触发删除时传递ID
const FilterProps = ({ filter, onDelete }: FilterProps) => {
  return (
    <div>
      <input value={filter.value} onChange={(e) => {/* 省略输入逻辑 */}} />
      <span onClick={() => onDelete(filter.id)}>×</span>
    </div>
  );
};

// 父组件直接传递removeFilter即可
{filters.map(filter => (
  <FilterProps 
    key={filter.id} 
    filter={filter} 
    onDelete={removeFilter} 
  />
))}

更优实现方案 #

1. 用自定义Hook封装筛选逻辑 #

把增删改逻辑抽离到自定义Hook，提升组件简洁度和逻辑复用性：

// useFilters.ts
import { useState } from 'react';

interface FilterItem {
  id: string;
  value: string;
}

export const useFilters = () => {
  const [filters, setFilters] = useState<FilterItem[]>([]);

  const addFilter = () => {
    const newId = crypto.randomUUID(); // 生成更唯一的ID
    setFilters(prev => [...prev, {id: newId, value: ''}]);
  };

  const removeFilter = (id: string) => {
    setFilters(prev => prev.filter(f => f.id !== id));
  };

  const updateFilterValue = (id: string, value: string) => {
    setFilters(prev => prev.map(f => f.id === id ? {...f, value} : f));
  };

  return { filters, addFilter, removeFilter, updateFilterValue };
};

2. 组件中使用自定义Hook #

// Filter.tsx
import { useFilters } from './useFilters';
import FilterProps from './FilterProps';

const Filter = () => {
  const { filters, addFilter, removeFilter, updateFilterValue } = useFilters();

  return (
    <div>
      <button onClick={addFilter}>添加筛选</button>
      {filters.map(filter => (
        <FilterProps 
          key={filter.id} 
          filter={filter} 
          onDelete={() => removeFilter(filter.id)}
          onValueChange={(value) => updateFilterValue(filter.id, value)}
        />
      ))}
    </div>
  );
};

3. 子组件简化 #

// FilterProps.tsx
interface FilterProps {
  filter: {id: string; value: string};
  onDelete: () => void;
  onValueChange: (value: string) => void;
}

const FilterProps = ({ filter, onDelete, onValueChange }: FilterProps) => {
  return (
    <div className="filter-item">
      <input 
        value={filter.value} 
        onChange={(e) => onValueChange(e.target.value)}
        placeholder="输入筛选值"
      />
      <button onClick={onDelete} className="delete-btn">×</button>
    </div>
  );
};

关键注意事项 #

• 循环渲染子组件时，必须使用唯一key值（推荐用filter的id，而非索引），避免React复用组件导致状态混乱。
• 传递删除事件时，确保ID正确绑定，避免闭包问题导致获取错误ID。
• 生成ID时，crypto.randomUUID()比Date.now()更可靠，避免短时间内添加多个筛选时ID重复。

内容的提问来源于stack exchange，提问作者Ali.k