如何重置 Shopify Polaris IndexTable 中的选择

Question

如何使用函数重置 Shopify Polaris IndexTable 中的选择？ https://polaris.shopify.com/components/tables/index-table

import {
  IndexTable,
  LegacyCard,
  useIndexResourceState,
  Text,
  Button,
} from '@shopify/polaris';
import React from 'react';

function SimpleIndexTableExample() {
  const orders = [
    {
      id: '1020',
      order: '#1020',
    },
    {
      id: '1019',
      order: '#1019',
    },
    {
      id: '1018',
      order: '#1018',
    },
  ];
  const resourceName = {
    singular: 'order',
    plural: 'orders',
  };

  const {selectedResources, allResourcesSelected, handleSelectionChange} =
    useIndexResourceState(orders);

    const resetSelection = () => {
      console.log('Reset selection. No items selected anymore.')
    }

  const rowMarkup = orders.map(
    (
      {id, order},
      index,
    ) => (
      <IndexTable.Row
        id={id}
        key={id}
        selected={selectedResources.includes(id)}
        position={index}
      >
        <IndexTable.Cell>
          <Text variant="bodyMd" fontWeight="bold" as="span">
            {order}
          </Text>
        </IndexTable.Cell>
      </IndexTable.Row>
    ),
  );

  return (
    <LegacyCard>
      <IndexTable
        resourceName={resourceName}
        itemCount={orders.length}
        selectedItemsCount={
          allResourcesSelected ? 'All' : selectedResources.length
        }
        onSelectionChange={handleSelectionChange}
        headings={[
          {title: 'Order'},
        ]}
      >
        {rowMarkup}
      </IndexTable>
      <Button onClick={resetSelection}>Reset selection</Button>
    </LegacyCard>

  );
}


export default SimpleIndexTableExample;

我尝试过重新渲染 IndexTable 和子组件来重置它，更改

selectedItemsCount

和

itemCount

值，但结果非常不一致，感觉就像我正在砍掉一个应该非常简单的部分。

Shopify Polaris 似乎使用此钩子来控制选择，但没有真正说明如何使用它的文档：

const { selectedResources, allResourcesSelected, handleSelectionChange } =
    useIndexResourceState(productList);

这是Codesandbox

中的一个简单示例