DevExtreme List选中项不保留问题求助

问题根源 #

父组件（App）更新selectedItem状态触发重渲染时，DevExtreme List组件会被重新初始化，其内部维护的选中状态被重置，导致选中项丢失。

具体解决方案 #

方案一：给List添加固定key #

给List设置一个稳定不变的key，让React识别它是同一个组件实例，避免重渲染时销毁重建：

<List
  key="product-list"
  dataSource={products}
  itemRender={itemRender}
  onItemClick={handleItemClick}
  selectionMode="single"
/>

方案二：手动绑定选中状态 #

不依赖List内部状态，通过selectedItem控制选中项，绑定selectedItemKeys属性同步状态：

<List
  dataSource={products}
  itemRender={itemRender}
  onItemClick={handleItemClick}
  selectionMode="single"
  selectedItemKeys={selectedItem ? [selectedItem.ID] : []}
/>

这样每次重渲染时，List会根据selectedItemKeys自动恢复选中状态。

方案三：封装List并优化渲染（可选） #

把List封装成独立组件，用React.memo包裹，减少不必要的重渲染：

const ProductList = React.memo(({ products, onItemClick, selectedItem }) => (
  <List
    dataSource={products}
    itemRender={({ data }) => <div>{data.Name}</div>}
    onItemClick={onItemClick}
    selectionMode="single"
    selectedItemKeys={selectedItem ? [selectedItem.ID] : []}
  />
));

在App组件中使用这个封装后的组件，只有当传入的products、onItemClick或selectedItem变化时，List才会重新渲染。

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