Question

反应表按以下方式对小数进行排序：

我的猜测是，尽管我正在从服务器接收数字，但是react-table将它们作为文本来处理。因此，我这样修改了访问器：

accessor: d => Number(d.Invoice_Weight).toFixed(2)

但是我一直弄错排序。

这是列的代码：

 {
                      Header: () => 
                      <DropDownMenu 
                      header={content[lang].Invoice_Weight}
                      openModal = {this.onOpenSelectColumnsModal}
                      />,
                      id: 'Invoice_Weight',
                      sortable: true,
                      accessor: d => Number(d.Invoice_Weight).toFixed(2),
                      //width: 200,
                      getProps: () => {
                        return {
                          style: {
                            textAlign: 'right'
                          }
                        }
                      },
                      show: Invoice_Weight,
                    },

Answer 1

我的猜测是这是由于.toFixed()返回一个字符串而导致的，因此它仍将它们作为字符串进行排序。因此，如果您想舍入数字并将其保留为两位小数，则必须执行以下操作：

accessor: d => Number(Number(d.Invoice_Weight).toFixed(2))

因此，首先将其转换为数字，将其四舍五入为两位小数的字符串，然后再次将其转换回数字。

Answer 2

如其他答案所建议，问题是toFixed返回一个字符串，因此将使用字符串比较来完成排序。但是，在这种情况下，强制返回数字将不起作用，否则您将丢失尾随的0，我想您仍然需要它们。

另一种解决方案是使用自定义排序：

accessor: d => Number(d.Invoice_Weight).toFixed(2),
sortMethod: (a, b) => Number(a)-Number(b)

您可能需要优化sortMethod来处理NaN和Infinities（如果有的话），但这是一般的想法

您可以使用此方法将字符串强制转换为数字，但只能在排序的情况下使用而不会影响显示的值

Answer 3

React Table 的默认排序方法提供按字符串排序。所以你必须使用 React Table 提供的 sortMethod 道具。

sortMethod: (a, b) => {
   a = Number(a); // Converting into number
   b = Number(b); // Converting into number
   if (a.length === b.length) {
     return a > b ? 1 : -1; // same length condition
   }
   return a.length > b.length ? 1 : -1; // comparing length of string
}

React Table无法正确排序数字

3 个答案: