Transfer组件动态更新数据后选中的项为什么会消失？

我之前踩过这个坑，问题的根本原因在于 Ant Design 的 Transfer 组件在数据源更新时会重新渲染整个列表，而 targetKeys 和 dataSource 的关联如果没有处理好，就会导致目标列表的状态丢失。

你已经给 listKey 设置了唯一标识，这一步是对的，但光靠这个还不够。关键是要保证 dataSource 和 targetKeys 的同步性。具体来说，当你动态更新 dataSource 时，新的数据源中必须包含当前 targetKeys 所对应的项，否则组件会认为这些项不存在，从而清空目标列表。

解决办法是这样的：在更新 dataSource 时，你需要同时检查并保留当前 targetKeys 中的有效项。假设你的 data 是从接口获取的新数据源，可以在更新时做一次过滤，确保 targetKeys 中的项仍然存在于新的 dataSource 中。

这是我的解决方案代码：

useEffect(() => {

  // 假设 fetchData 是从接口获取数据的方法

  fetchData().then(newData => {

    // 过滤出当前 targetKeys 中仍然有效的 key

    const validTargetKeys = targetKeys.filter(key => 

      newData.some(item => item.id.toString() === key)

    );

    setData(newData); // 更新数据源

    setTargetKeys(validTargetKeys); // 同步更新目标 keys

  });

}, [fetchData]);



<Transfer

  listStyle={{ width: 200 }}

  dataSource={data}

  targetKeys={targetKeys}

  onSelect={(keys, direction) => setSelected(keys)}

  onChange={(nextKeys) => setTargetKeys(nextKeys)}

  listKey={(item) => item.id.toString()}

/>

简单解释一下这段代码的逻辑：
1. 每次从接口获取新数据后，先用 targetKeys 对比新数据源，筛选出那些仍然存在的项。
2. 把筛选后的结果重新赋值给 targetKeys，这样就能保证目标列表不会被清空。
3. 最后再更新 dataSource 和 targetKeys。

还有一点要注意，确保你的 id 字段在整个数据流中是唯一的，并且和 listKey 的返回值保持一致。如果 listKey 返回的值不是 id 而是其他字段，记得调整对比逻辑。

这样做之后，动态更新数据源时，目标列表的选中状态就不会丢了。我之前就是因为忽略了同步 targetKeys 和 dataSource 的关系，调试了半天才找到问题所在，希望你能少走点弯路。

这个问题的核心在于数据更新时如何正确维护组件的状态。你的代码里已经有 targetKeys 来管理目标列表的选中状态，但动态更新数据源时，Ant Design 的 Transfer 组件会重新渲染，如果数据源和 targetKeys 不完全匹配，就会导致目标列表被清空。

建议改成这样处理：在动态更新数据源时，确保新的数据源不会影响到已经选中的 targetKeys。具体来说，你可以通过以下步骤解决：

1. 在更新数据源时，检查新数据和旧数据的差异，只更新那些未被选中的项。
2. 确保 dataSource 和 targetKeys 中的 key 值严格一致，比如你用的是 item.id.toString()，那么整个流程都要统一使用这个规则。

这里是一个改进后的代码示例：

const [data, setData] = useState([]);

const [targetKeys, setTargetKeys] = useState([]);



// 模拟接口更新数据

const updateDataSource = (newData) => {

  // 过滤掉已经在 targetKeys 中的项，避免覆盖

  const filteredData = newData.filter(item => !targetKeys.includes(item.id.toString()));

  setData([...filteredData, ...data.filter(item => targetKeys.includes(item.id.toString()))]);

};



return (

  <Transfer

    listStyle={{ width: 200 }}

    dataSource={data}

    targetKeys={targetKeys}

    onChange={(nextKeys) => setTargetKeys(nextKeys)}

    rowKey={(item) => item.id.toString()}

  />

);

重点是 updateDataSource 方法，它会在更新数据源时保留已选中的项，而不是直接覆盖整个数据源。另外注意 rowKey 属性的设置，确保它的值和 targetKeys 的格式一致。

最后吐槽一句，这种问题真是调试起来挺烦的，尤其是涉及到 React 的状态管理和组件渲染逻辑的时候，稍微不注意就容易踩坑。希望这个方案能帮你解决问题。