Question

我正在使用React ant design table。在该表中，我尝试使用localeCompare对空值进行排序。它显示类型错误。

JSON

const data = [{
  key: '1',
  name: null,
  age: 32,
}, {
  key: '2',
  name: 'Jim Green',
  age: '32',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
}];

当我排序时，我得到的错误如下：

 TypeError: Cannot read property 'localeCompare' of null

我在Code sand box

上有完整的代码

Answer 1

您可以检查您的值是否为export default { Button }，然后您可以使用竖线指定空白。

在您的代码中，您可以这样做

export default Button

DEMO

＆＃13;

null

＆＃13;

{
    title: "Name",
    dataIndex: "name",
    key: "name",
    sorter: (a, b) => {
        a = a.name || '';
        b = b.name || '';
        return a.localeCompare(b);
    }
},

＆＃13;

Answer 2

如果您有ES2020，则有optional chaining可以通过返回undefined来防止错误，而不是在评估值为空时抛出错误。您可以这样使用它

arr.sort((a,b) => a?.localeCompare(b))

来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

反应| localeCompare使用空值排序

2 个答案: