Javascript 通过单击具有数值和字符串值的列的表标题对表进行排序

我在为带有字符串值的列单击列标题对React表进行排序时遇到问题，但对于带有数值的列，一切都正常。我认为我在sortBySymbolHandler方法中做错了。我想我对字符串的检查是：this.state.directionSymbol[key]=“asc”？a[键]-b[键]：b[键]-a[键]错误

    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;

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;

从“React”导入React；；
从“./TableRow/TableRow”导入TableRow；
const coinTable=（道具）=>(
#
名称
props.sortBySymbol（'symbol'）}>symbol
props.sortByPrice（'price_usd'）}>价格
%/时辰
%/一天
%/周
{
props.data.map（行=>{
施工价格=行价格×美元；
const formattedPrice=parseFloat（price）.toFixed（2）；
返回(
)
})
}
);
导出默认值；

---

有人能帮忙吗？

你不能从一个字符串中减去另一个字符串

而不是做：

 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'；
如果（a[键]b[键]）为else{
返回asc？1:-1；
}否则{
返回0；
}
)),

谢谢道格，这很有帮助。

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