使用Lodash对数字字符串进行排序并作出反应？
使用Lodash对数字字符串进行排序并作出反应？
提问于 2019-11-24 02:40:48
我正在整理我的表列。我的带有文本的专栏排序很好，而那些带有数字的则不是。
当我用我想要排序的数字检查数据时，我会看到以下内容。这只是一个例子：
watchCount: ["2"]此外，有些项目没有我需要的一些字段，在这种情况下，我只是显示一个0。可以在下面看到。
这是我的表，我在那里映射数据。我还试图在数值数据中包含一个parseInt()，但这没有帮助。我试图复制这个例子：语义ui反应排序
我只是不知道我在这里是否做错了什么，或者因为它是一个字符串而不能排序。
<Table sortable celled fixed striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell
sorted={column === "title" ? direction : null}
onClick={() => handleSort("title")}
>
Card Title
</Table.HeaderCell>
<Table.HeaderCell
sorted={column === "bids" ? direction : null}
onClick={() => handleSort("bids")}
>
# Bids
</Table.HeaderCell>
<Table.HeaderCell
sorted={column === "watch" ? direction : null}
onClick={() => handleSort("watch")}
>
Watchers
</Table.HeaderCell>
<Table.HeaderCell
sorted={column === "price" ? direction : null}
onClick={() => handleSort("price")}
>
Price
</Table.HeaderCell>
<Table.HeaderCell
sorted={column === "time" ? direction : null}
onClick={() => handleSort("time")}
>
Time Left
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{_.map(filteredData, card => (
<>
<Table.Row key={card.id}>
<Table.Cell>{card.title}</Table.Cell>
<Table.Cell>
{parseInt(
card.sellingStatus[0].bidCount
? card.sellingStatus[0].bidCount
: 0
)}
</Table.Cell>
<Table.Cell>
{parseInt(
card.listingInfo[0].watchCount
? card.listingInfo[0].watchCount
: 0
)}
</Table.Cell>
<Table.Cell>
$
{parseInt(
card.sellingStatus &&
card.sellingStatus[0].currentPrice[0]["__value__"]
)}
</Table.Cell>
<Table.Cell>
<TimeAgo
date={new Date(
card.listingInfo && card.listingInfo[0].endTime
).toLocaleDateString()}
/>
</Table.Cell>
</Table.Row>
</>
))}
</Table.Body>
</Table>注意，这里也是我的handleSort函数
const [column, setColumn] = useState(null);
const [direction, setDirection] = useState(null);
const [filteredData, setData] = useState(props.cardsToShow);
console.log("CARDS TO SHOW", props.cardsToShow);
console.log("TYPE OF", typeof cardsToShow);
console.log("Filtered Data", filteredData);
console.log("column", column);
console.log("direction", direction);
const handleSort = clickedColumn => {
if (column !== clickedColumn) {
setColumn(clickedColumn);
setData(_.sortBy(filteredData, [clickedColumn]));
setDirection("ascending");
return;
}
setData(_.sortBy(filteredData.reverse()));
direction === "ascending"
? setDirection("descending")
: setDirection("ascending");
};编辑代码
const handleSortNumeric = clickedColumn => {
const sorter = data => ~~data[clickedColumn];
setData(_.sortBy(filteredData, sorter));
};
const handleSortReverse = () => {
const sorter = data => ~~data;
setData(_.sortBy(filteredData.reverse(), sorter));
};
const handleSort = clickedColumn => {
if (column !== clickedColumn) {
setColumn(clickedColumn);
// setData(_.sortBy(filteredData, [clickedColumn]));
handleSortNumeric(clickedColumn);
setDirection("ascending");
return;
}
// setData(_.sortBy(filteredData.reverse()));
handleSortReverse();
direction === "ascending"
? setDirection("descending")
: setDirection("ascending");
};回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-24 03:20:07
排序字符串将遵循Unicode的顺序，它们发生在每个字符，而不是一个数字的整体。所以，当对"40“和"5”排序时，你会认为"5“会排在第一位，但"40”中的"4“是与之相比的。
有关更多细节，请参见这里：对象/数组/排序
至于直接解决问题，您可以将_.sortBy()函数作为第二个参数传递，并在函数中将值转换为数字(使用~~、Number()、parseInt()等)以避免字符串比较。
由于您似乎有这些硬编码，所以还可以使用单独的handleSort函数来区分这些关注点：
const handleSortNumeric = ( clickedColumn ) => {
// ...
const sorter = data => ~~data[ clickedColumn ];
setData(_.sortBy(filteredData, sorter));
// ...
};但是，如果您控制了来自服务器的数据的显示方式，则应该提供正确的类型，以避免将来出现这种情况。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59014194
复制相关文章
相似问题
腾讯云开发者
