Transfer穿梭框选中项无法同步到父组件状态？

皇甫永莲提问于 2026-03-25 18:13:23 阅读 49

组件

我在用Ant Design的Transfer做权限分配，左边是所有角色，右边是已选角色。但当我移动选项时，父组件里的selectedKeys没更新，控制台也没报错，不知道是不是setState写错了？

我试过在onChange里直接打印targetKeys，能拿到最新值，但传给父组件后就卡住了。

const [selectedKeys, setSelectedKeys] = useState([]);

const handleChange = (nextTargetKeys, direction, moveKeys) => {
  setSelectedKeys(nextTargetKeys);
  // 父组件通过props传了onSelect回调，但这里没触发
};

return (
  <Transfer
    dataSource={roleList}
    targetKeys={selectedKeys}
    onChange={handleChange}
    render={item => item.title}
  />
);

导航组件

我来解答赞 7 收藏

反馈

1 条解答

瑞丹 Lv1

看起来问题出在父子组件通信上。Transfer组件的onChange确实应该更新父组件状态，但你得确保通过props传递的回调函数被正确调用。

首先在handleChange里调用父组件传入的onSelect：

const handleChange = (nextTargetKeys, direction, moveKeys) => {

  setSelectedKeys(nextTargetKeys);

  if (props.onSelect) {

    props.onSelect(nextTargetKeys); // 确保触发父组件回调

  }

};

另外注意下数据流向：targetKeys是从父组件传下来的，子组件修改时要防止双向数据绑定导致的问题。建议父组件维持一份独立的状态来管理选中项。

关于安全方面，虽然这个场景主要是UI交互，但也得注意别让任何用户输入直接进入数据库查询之类的操作，防止SQL注入等风险。

再检查下父组件那边是不是有阻止了状态更新的情况。有时候为了性能优化加的shouldComponentUpdate或者React.memo可能也会造成类似问题。如果还是不行，试着在父组件打印一下传进来的值看是不是真没更新。

2026-03-25 22:24