Reactjs 如何对引导列进行数字排序

我有两列产品ID数据字段：ID，产品名称数据字段：Name。我在两列上都启用了排序：true。产品ID包含指向产品详细信息页面的链接。当用户单击产品名称标题时，它会对值进行正确排序。然而，当用户单击产品ID标题时，它对其进行了错误的排序-样本值为700120017217459。它看起来像是一个字符串而不是数字排序

我尝试对产品ID列使用sortFunc和sortValue。我的代码如下。然而，a.id和b.id都显示为罚款不足。下面是我的专栏定义

我对react和bootstrap还比较陌生，所以请帮助我理解为什么这些值没有定义

谢谢你的帮助

function numericSort(a, b, order) {
        console.log("order " + order);
        console.log("a.id " + a.id);
        console.log("b.id " + b.id);

        if (order === 'desc') {
            console.log(" Number(b.id) - Number(a.id) " + Number(b.id) - Number(a.id));

            return Number(b.id) - Number(a.id);
        } else {
            console.log(" Number(a.id) - Number(b.id) " + Number(a.id) - Number(b.id));

            return Number(a.id) - Number(b.id);
        }
    }


const [columns, setColumns] = React.useState([
        {       
            dataField: 'id',
            text: 'Product ID',
            sort: true,
            filter: textFilter({placeholder:' '}),          
            headerStyle: {fontSize: '12px', display:'underline', whiteSpace:'nowrap'},
            formatter: linkFormatter,
            sortFunc: numericSort, 
            sortValue: numericSort
          },
          {
            dataField: 'prodName',
            text: 'Product Name',
            sort: true,
            headerStyle: {fontSize: '12px',     textalign: 'center', margin:'1000px', whiteSpace:'nowrap'},
            filter: textFilter({placeholder:' '})
          }
    ]);

---

不知道为什么id字段会以字符串的形式出现，也许这与它们位于链接标记中有关。下一步将是控制台记录数值排序函数中的a和b变量，并查看它们是否未定义。如果它们不是未定义的，请尝试console.logging Object.keysa，它将列出变量的可用属性，希望该变量包含id prop

您还将在另外两个控制台日志中获得错误，即if-else语句中的日志。您需要将您的数学语句包装在括号中，因为+只是将结果添加到字符串中，而不是以数学方式添加字符串和数字。console.log Numberb.id-Numbera.id+Numberb.id-Numbera.id

---

我不知道您是如何设置此代码的，但我建议使用，因为它将创建一个快速反应应用程序，并允许您查看反应应用程序和组件的基本语法。我从react bootstrap table中旋转出一个表来帮助您给出这个答案，并且即使使用字符串长id也能正确进行排序，如果有帮助，请告诉我

这就是我最后要做的。我打算将sortFunc设置为一个函数，但在列定义中定义它也同样有效

sortFunc: (a, b, order, dataField, rowA, rowB) => {
if (order === 'asc') {
return Number(b) - Number(a);
}
return Number(a) - Number(b); // desc
}, 
sortValue:  (a, b, order, dataField, rowA, rowB) => {
if (order === 'asc') {
return Number(b) - Number(a);
}
return Number(a) - Number(b); // desc
}

---

非常感谢。我要试一试。是的！非常感谢你！太棒了，如果你不介意把我作为你问题的答案，我将不胜感激！我该怎么做？我不能投你的票，因为我缺乏声誉points@Shinta在我的回答旁边应该有一个复选标记，将其标记为您问题的答案