数値と文字列値を持つ列のテーブルヘッダーをクリックしてReactテーブルを並べ替える

イヴァナ

文字列値を持つ列の列ヘッダーをクリックしてReactテーブルを並べ替えるのに問題がありますが、数値を持つ列ではすべて問題ありません。sortBySymbolHandlerメソッドで間違っていると思います。文字列のチェック:this.state.directionSymbol [key] === 'asc'?a [key] -b [key]:b [key] -a [key]が間違っています。

    import React, { Component } from 'react';
    import CoinTable from '../components/CoinTable/CoinTable';
    import data from '../components/Data/Data.json';

    class App extends Component {
        constructor(props) {
            super(props)
            this.state = {
                data: data,
                direction: {
                    price_usd: 'asc'
                },
                directionSymbol: {
                    symbol: 'asc'
                }
            }
        }

        sortBySymbolHandler = (key) => {
             this.setState({
                data: data.sort((a, b) => (
                    this.state.directionSymbol[key] === 'asc'
                    ? a[key] - b[key]
                    : b[key] - a[key]
                )),

                directionSymbol: {
                    [key]: this.state.directionSymbol[key] === 'asc'
                    ? 'desc'
                    : 'asc'
                }
            })
        }

        sortByPriceHandler = (key) => {
            this.setState({
                data: data.sort((a, b) => (
                    this.state.direction[key] === 'asc'
                    ? 
                     parseFloat(a[key]) - parseFloat(b[key])
                    : parseFloat(b[key]) - parseFloat(a[key])
                )),

                direction: {
                    [key]: this.state.direction[key] === 'asc'
                    ? 'desc'
                    : 'asc'
                }
            })
        }

        render() {
            return (
                <div className="App">
                    <div className="container-fluid">
                        <div className="container">
                            <CoinTable 
                                data={this.state.data} 
                                sortBySymbol={this.sortBySymbolHandler}
                                sortByPrice={this.sortByPriceHandler}
                            />
                        </div>
                    </div>
                </div>
            );
        }
    }

    export default App;

Data.jsonの形式は次のとおりです。

    [
        {
            "id": "bitcoin", 
            "name": "Bitcoin", 
            "symbol": "BTC", 
            "rank": "1", 
            "price_usd": "10406.5", 
            "price_btc": "1.0", 
            "24h_volume_usd": "9766700000.0", 
            "market_cap_usd": "175053324790", 
            "available_supply": "16821537.0", 
            "total_supply": "16821537.0", 
            "max_supply": "21000000.0", 
            "percent_change_1h": "-0.04", 
            "percent_change_24h": "-3.39", 
            "percent_change_7d": "-12.62", 
            "last_updated": "1516718960"
        }, 
        {
            "id": "ethereum", 
            "name": "Ethereum", 
            "symbol": "ETH", 
            "rank": "2", 
            "price_usd": "947.841", 
            "price_btc": "0.0917641", 
            "24h_volume_usd": "3615420000.0", 
            "market_cap_usd": "92093645501.0", 
            "available_supply": "97161492.0", 
            "total_supply": "97161492.0", 
            "max_supply": null, 
            "percent_change_1h": "0.3", 
            "percent_change_24h": "-4.04", 
            "percent_change_7d": "-13.22", 
            "last_updated": "1516718952"
        }, 
        {
            "id": "ripple", 
            "name": "Ripple", 
            "symbol": "XRP", 
            "rank": "3", 
            "price_usd": "1.27202", 
            "price_btc": "0.00012315", 
            "24h_volume_usd": "2597960000.0", 
            "market_cap_usd": "49276964438.0", 
            "available_supply": "38739142811.0", 
            "total_supply": "99993093880.0", 
            "max_supply": "100000000000", 
            "percent_change_1h": "0.83", 
            "percent_change_24h": "3.49", 
            "percent_change_7d": "-5.9", 
            "last_updated": "1516718941"
        } 
]

CoinTable.jsは次のようになります。

import React from 'react';;
import TableRow from './TableRow/TableRow';

const coinTable = (props) => (
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th><button onClick={() => props.sortBySymbol('symbol')}>Symbol</button></th>
                <th><button onClick={() => props.sortByPrice('price_usd')}>Price</button></th>
                <th>%/hour</th>
                <th>%/day</th>
                <th>%/week</th>
            </tr>
        </thead>
        <tbody>
            {
                props.data.map(row => {
                    const price = row.price_usd;
                    const formattedPrice = parseFloat(price).toFixed(2);
                    return (
                        <TableRow key={row.rank} row={row} formattedPrice={formattedPrice} />
                    )
                })
            }
        </tbody>
    </table>
);

export default coinTable;

誰かが助けることができますか?

ダグコバーン

ある文字列を別の文字列から減算することはできません。

行う代わりに:

 data: data.sort((a, b) => (
     this.state.directionSymbol[key] === 'asc'
         ? a[key] - b[key]
         : b[key] - a[key]
 )),

行う:

 data: data.sort((a, b) => {
     const asc = this.state.directionSymbol[key] === 'asc';
     if (a[key] < b[key]) {
         return asc ? -1 : 1;
     } else if (a[key] > b[key]) {
         return asc ? 1 : -1;
     } else {
         return 0;
     }
 )),

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

配列を値として持つハッシュテーブルを並べ替える

分類Dev

ヘッダーをクリックしてテーブルの列を昇順または降順で並べ替える方法

分類Dev

Datatablesテーブルヘッダースパンをクリックしたときの列の並べ替えを有効/無効にします

分類Dev

文字列とbashの数値が混在する列に基づいてテーブルを並べ替える

分類Dev

文字列を数値としてデータテーブルで並べ替える

分類Dev

文字列を数値としてデータテーブルで並べ替える

分類Dev

Pythonを使用して、インデックス付き列とインデックスなし列に基づいてテーブル値を並べ替える

分類Dev

ヘッダークリックでテーブル列を並べ替えますか?

分類Dev

データテーブルでのみ数値を持つ列を並べ替える方法は?

分類Dev

ユーザーが列をクリックしたときにテーブルを並べ替える

分類Dev

特定の値を持つ列の数でテーブルを並べ替える方法

分類Dev

マットテーブルを列の値で並べ替える

分類Dev

DataTables-データを並べ替えるテーブルヘッダーのテキストのみをクリックします

分類Dev

テーブルソーターの列の並べ替えが、テーブルヘッダーのチェックオールチェックボックスを上書きしています

分類Dev

jQuery:複数の列値でテーブルを並べ替える

分類Dev

列の値を2番目のテーブルから繰り返して1つのテーブルのレコードを並べ替える方法

分類Dev

SQL Server : XML 列を持つ個別のテーブルを並べ替える

分類Dev

見出しをクリックして並べ替え可能なテーブル

分類Dev

Javascriptを使用して複数桁のエントリを持つテーブルを並べ替える

分類Dev

HTMLテーブルヘッダーのMySql行を並べ替える方法

分類Dev

上部ヘッダー行のみでテーブルを並べ替える方法

分類Dev

パンダのピボットテーブルをマージン(「すべて」)の値の列で並べ替える

分類Dev

Name-Valueテーブルを、名前を列ヘッダーとして持つ別のテーブルに変換しますが、1つの名前タイプに複数の値を含めることができます

分類Dev

Q:Luaで数値のテーブルを並べ替える

分類Dev

テーブルを並べ替えるが、テーブルヘッダーが壊れている

分類Dev

2つの列(インデックスと値)を持つパンダのピボットテーブル

分類Dev

jqueryテーブルソーターを使用して整数とパーセンテージ値の両方を単一の列に並べ替える

分類Dev

SQLテーブルを複数の列で並べ替える

分類Dev

Javafxテーブルを複数の列で並べ替える

Related 関連記事

  1. 1

    配列を値として持つハッシュテーブルを並べ替える

  2. 2

    ヘッダーをクリックしてテーブルの列を昇順または降順で並べ替える方法

  3. 3

    Datatablesテーブルヘッダースパンをクリックしたときの列の並べ替えを有効/無効にします

  4. 4

    文字列とbashの数値が混在する列に基づいてテーブルを並べ替える

  5. 5

    文字列を数値としてデータテーブルで並べ替える

  6. 6

    文字列を数値としてデータテーブルで並べ替える

  7. 7

    Pythonを使用して、インデックス付き列とインデックスなし列に基づいてテーブル値を並べ替える

  8. 8

    ヘッダークリックでテーブル列を並べ替えますか?

  9. 9

    データテーブルでのみ数値を持つ列を並べ替える方法は?

  10. 10

    ユーザーが列をクリックしたときにテーブルを並べ替える

  11. 11

    特定の値を持つ列の数でテーブルを並べ替える方法

  12. 12

    マットテーブルを列の値で並べ替える

  13. 13

    DataTables-データを並べ替えるテーブルヘッダーのテキストのみをクリックします

  14. 14

    テーブルソーターの列の並べ替えが、テーブルヘッダーのチェックオールチェックボックスを上書きしています

  15. 15

    jQuery:複数の列値でテーブルを並べ替える

  16. 16

    列の値を2番目のテーブルから繰り返して1つのテーブルのレコードを並べ替える方法

  17. 17

    SQL Server : XML 列を持つ個別のテーブルを並べ替える

  18. 18

    見出しをクリックして並べ替え可能なテーブル

  19. 19

    Javascriptを使用して複数桁のエントリを持つテーブルを並べ替える

  20. 20

    HTMLテーブルヘッダーのMySql行を並べ替える方法

  21. 21

    上部ヘッダー行のみでテーブルを並べ替える方法

  22. 22

    パンダのピボットテーブルをマージン(「すべて」)の値の列で並べ替える

  23. 23

    Name-Valueテーブルを、名前を列ヘッダーとして持つ別のテーブルに変換しますが、1つの名前タイプに複数の値を含めることができます

  24. 24

    Q:Luaで数値のテーブルを並べ替える

  25. 25

    テーブルを並べ替えるが、テーブルヘッダーが壊れている

  26. 26

    2つの列(インデックスと値)を持つパンダのピボットテーブル

  27. 27

    jqueryテーブルソーターを使用して整数とパーセンテージ値の両方を単一の列に並べ替える

  28. 28

    SQLテーブルを複数の列で並べ替える

  29. 29

    Javafxテーブルを複数の列で並べ替える

ホットタグ

アーカイブ