Grommet DataTable如何实现单选，自定义选中逻辑出现双击问题如何解决

Grommet的DataTable组件是否内置了仅允许单选或多选的能力？我自行编写了useState处理选中逻辑，在赋值选中数组前先清空原有内容，但出现了需要用户双击才能选中的异常问题：当选中数组长度大于1时，点击操作会先将选中数组设为[]，导致用户需要再次点击才能完成选中。

最初的实现代码如下：

import React from "react";
import ReactDOM from "react-dom";
import {Grommet, DataTable, Text, Meter, Box} from 'grommet';


const GridExample = () => {
    const [select, setSelect] = React.useState([])

    function handleRowSelect(selection) {
        console.log(`You picked ${selection}`);
        if (selection.length > 1) {
            setSelect(selection[selection.length - 1].toArray)
        } else {
            setSelect(selection)
        }

    }

    return (
        <Grommet>
            <DataTable
                select={select}
                onSelect={handleRowSelect}
                columns={[
                    {
                        property: 'name',
                        search: true,
                        header: <Text>Name</Text>,
                        primary: true,
                    },
                    {
                        property: 'percent',
                        search: true,
                        header: 'Complete',
                        render: datum => (
                            <Box pad={{vertical: 'xsmall'}}>
                                <Meter
                                    values={[{value: datum.percent}]}
                                    thickness="small"
                                    size="small"
                                />
                            </Box>
                        ),
                    },
                ]}
                data={[
                    {name: 'Alan', percent: 20},
                    {name: 'Bryan', percent: 30},
                    {name: 'Chris', percent: 40},
                    {name: 'Eric', percent: 80},
                ]}
            />
            <Text>Selected: {select}</Text>
        </Grommet>
    )
}

export default GridExample;

ReactDOM.render(
    <GridExample/>,
  document.getElementById("root")
);

修复方案 #

Grommet DataTable默认支持多选能力，要实现单选无需修改组件内置属性，只需调整onSelect回调的选中数组处理逻辑即可，原问题的双击异常是选中项取值逻辑错误导致的，使用slice方法截取最后一个选中项即可解决问题，修复后的代码如下：

function handleRowSelect(selection) {
    if (selection.length > 1) {
        setSelect(selection.slice(-1))
    } else {
        setSelect(selection)
    }
}

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