javascript - 使用 Lodash 和 React 对数字字符串进行排序？

Question

我正在对表格列进行排序。我的带有文本的列排序良好，但带有数字的列则不然。

当我用我试图排序的数字检查数据时，我看到以下内容。这只是一个例子:

watchCount: ["2"]

此外，有些项目没有我需要的某些字段，在这种情况下我只显示 0。可以在下面看到。

这是我在其中映射数据的表。我也只是尝试将 parseInt() 包含在数字数据中，但这没有帮助。我正在尝试复制此示例:semantic ui react sort

我只是无法判断我在这里的排序是否有问题，或者是否因为它是一个字符串而无法排序。

 <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");
  };

Answer 1

对字符串进行排序将遵循 Unicode 顺序，并且对每个字符进行排序，而不是对数字进行整体排序。因此，当对“40”和“5”进行排序时，您会期望“5”排在第一位，但“40”中的“4”是它所比较并丢失的内容。

请参阅此处了解更多详细信息: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

就直接解决问题而言，您可以将函数作为第二个参数传递给 _.sortBy() ，并在函数中将值转换为数字(使用 ~~ 、Number()、parseInt() 等)以避免字符串比较。

由于您似乎对这些进行了硬编码，因此您还可以使用单独的handleSort 函数来分隔问题:

const handleSortNumeric = ( clickedColumn ) => {
    // ...

    const sorter = data => ~~data[ clickedColumn ];
    setData(_.sortBy(filteredData, sorter));

    // ...
};

<小时/>

但是，如果您可以控制服务器如何呈现数据，则应该提供正确的类型，以避免将来出现类似情况