API获取项选中状态异常及搜索后选中丢失问题求助

问题1：搜索新内容时，新渲染项自动选中 #

根源 #

你当前使用数组索引i作为组件的key，当搜索内容变化导致过滤后的数组项更新时，React会复用原有组件实例而非创建新实例，子组件内部的selectInsurance状态会被保留，从而出现新项自动选中的假象。

解决方案 #

将key替换为保险项的唯一标识（比如每个保险对象的ID字段，假设filtered包含Id属性），确保每个组件实例拥有独一无二的标识，让React正确销毁旧组件、创建新组件：

.map((filtered) => (
  <EachInsurance
    filtered={filtered}
    key={filtered.Id} // 用保险项唯一ID替代索引
    styles={scss}
    DatePresence={DatePresence}
    IdInsurance={IdInsurance}
    TimePresence={TimePresence}
    // 后续还要添加父组件传递的选中状态与回调（见问题2方案）
  />
))

问题2：清空搜索框后选中状态丢失 #

根源 #

选中状态selectInsurance被存储在每个EachInsurance子组件内部，当搜索框清空后，这些子组件会被卸载，内部状态也随之丢失。

解决方案 #

将选中状态提升到父组件，用选中项的唯一ID维护全局选中状态，而非让子组件各自存储布尔值：

1. 父组件中添加全局选中状态：

// 父组件初始化状态，存储选中保险的ID，初始值为null
const [selectedInsuranceId, setSelectedInsuranceId] = useState(null);

2. 父组件向子组件传递选中状态与切换回调：

.map((filtered) => (
  <EachInsurance
    filtered={filtered}
    key={filtered.Id}
    styles={scss}
    DatePresence={DatePresence}
    IdInsurance={IdInsurance}
    TimePresence={TimePresence}
    isSelected={selectedInsuranceId === filtered.Id} // 传递当前项是否选中的判断
    onToggleSelect={() => {
      // 切换选中状态：已选中则取消，未选中则标记为选中
      setSelectedInsuranceId(prev => prev === filtered.Id ? null : filtered.Id);
      setCount(0); // 原子组件内的setCount逻辑移至此处
    }}
  />
))

3. 修改EachInsurance子组件，移除内部状态，改用父组件传递的props：

const EachInsurance = ({ filtered, styles, isSelected, onToggleSelect }) => {
  return (
    <Container
      className={styles.eachInsurance}
      style={{
        borderRight: `${isSelected ? "20px" : "1px"} solid #fcc4de`,
      }}
    >
      <div onClick={onToggleSelect}>
        <p className={styles.NameService}>{filtered.Name.replace(/ي/g, "ی")}</p>
      </div>
    </Container>
  );
};

修改后效果：

• 清空搜索框重新搜索时，只要选中的保险项出现在新结果中，会自动恢复选中状态
• 搜索新内容时，组件不会被复用，不会出现自动选中的异常

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