排序功能在反应中不起作用 table

Question

所以我试图添加排序我的反应 table 组件，我写了两个函数，一个用于升序排序，另一个用于降序排序，并希望它在 onClick 上触发，但它只是似乎不起作用，我不知道代码中做错了什么。这是我的代码：

import type { HTMLAttributes, FC } from 'react';
import React, { useState } from 'react';
import './Table.css';

export interface Props extends HTMLAttributes<HTMLHRElement> {
    colNames?: [];
    /** Data in JSON to feed the table */
    data?: JSON[];
}
/**
 * Component that serves as an table for ease of templating
 *
 * @return Table component
 */
export const Table: FC<Props> = ({ 
 data = [
    { id: 12, name: 'zebra', Age: 30 },
    { id: 2, name: 'Name2', Age: 30 },
    { id: 3, name: 'Name3', Age: 30 },
    { id: 4, name: 'Name4', Age: 30 },
],
colNames = ['id', 'name', 'Age'], }) => {
    const [sorted, setsorted] = useState(data);

    /** Function to sort ascending order */
    const ascOrder = (): void => {
        setsorted(sorted.sort((a: any, b: any) => a.id - b.id));
    };

    /** Function to sort descending order */
    const descOrder = (): void => {
        setsorted(sorted.sort((a: any, b: any) => b.id - a.id));
    };
    return (
        <div className="my-component-library-table-component-container">
            {data.length > 0 && (
                <table className="my-component-library-table-component" cellSpacing="0">
                    <thead className="header">
                        <tr>
                            {(colNames as any[]).map((headerItem, index) => (
                                <th key={index}>
                                    <span>{headerItem.toUpperCase()}</span>
                                    <button title={headerItem + 'ASC'} onClick={() => ascOrder}>
                                        ↑
                                    </button>
                                    <button title={headerItem + 'DESC'} onClick={() => descOrder}>
                                        ↓
                                    </button>
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody>
                        {Object.values(data).map((obj, index) => (
                            <tr key={index}>
                                {Object.values(obj).map((value, index2) => (
                                    <td key={index2}> {value} </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                    <tfoot className="my-component-library-table-component-footer"></tfoot>
                </table>
            )}
        </div>
    );
};

Willow 的解决方案：

import type { HTMLAttributes, FC } from 'react';
import React, { useState } from 'react';
import './Table.css';

export interface Props extends HTMLAttributes<HTMLHRElement> {
    colNames?: [];
    /** Data in JSON to feed the table */
    data?: JSON[];
}
/**
 * Component that serves as an table for ease of templating
 *
 * @return Table component
 */
export const Table: FC<Props> = ({
    data = [
        { id: 12, name: 'zebra', Age: 30 },
        { id: 2, name: 'Name2', Age: 30 },
        { id: 3, name: 'Name3', Age: 30 },
        { id: 4, name: 'Name4', Age: 30 },
    ],
    colNames = ['id', 'name', 'Age'],
}) => {
    const [sorted, setsorted] = useState(data);

    /** Function to sort ascending order */
    const ascOrder = (): void => {
        setsorted(sorted.sort((a: any, b: any) => a.id - b.id));
    };

    /** Function to sort descending order */
    const descOrder = (): void => {
        setsorted(sorted.sort((a: any, b: any) => b.id - a.id));
    };
    return (
        <div className="my-component-library-table-component-container">
            {data.length > 0 && (
                <table className="my-component-library-table-component" cellSpacing="0">
                    <thead className="header">
                        <tr>
                            {(colNames as any[]).map((headerItem, index) => (
                                <th key={index}>
                                    <span>{headerItem.toUpperCase()}</span>
                                    <button title={headerItem + 'ASC'} onClick={ascOrder}>
                                        ↑
                                    </button>
                                    <button title={headerItem + 'DESC'} onClick={descOrder}>
                                        ↓
                                    </button>
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody>
                        {sorted.map((obj, index) => (
                            <tr key={index}>
                                {Object.values(obj).map((value, index2) => (
                                    <td key={index2}> {value} </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                    <tfoot className="my-component-library-table-component-footer"></tfoot>
                </table>
            )}
        </div>
    );
};

Answer 1

看起来您实际上并没有调用 ascOrder 和 descOrder 函数。您正在定义 return 这些函数的内联函数。相反，试试这个：

<button title={headerItem + 'ASC'} onClick={ascOrder}>
    ↑
</button>
<button title={headerItem + 'DESC'} onClick={descOrder}>
    ↓
</button>

编辑：此外，您还映射了原始 data 而不是排序后的版本。尝试改变这个：

{Object.values(data).map((obj, index) => (

对此：

{Object.values(sorted).map((obj, index) => (

编辑：如果我们想保持顺序，不应该使用 Object.values！不知道我以前是怎么错过的。

试试这个

{sorted.map(obj => (

编辑：可能是因为您将索引用作键。而不是这个：

                    <tbody>
                        {sorted.map((obj, index) => (
                            <tr key={index}>
                                {Object.values(obj).map((value, index2) => (
                                    <td key={index2}> {value} </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>

试试这个：

                    <tbody>
                        {sorted.map((obj) => (
                            <tr key={obj.id}>
                                {Object.values(obj).map((value, index2) => (
                                    <td key={index2}> {value} </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>

Answer 2

import type { HTMLAttributes, FC } from 'react';
import React, { useState } from 'react';
import './Table.css';

export interface Props extends HTMLAttributes<HTMLHRElement> {
    colNames?: [];
    /** Data in JSON to feed the table */
    data?: JSON[];
}
/**
 * Component that serves as an table for ease of templating
 *
 * @return Table component
 */
export const Table: FC<Props> = ({ 
 data = [
    { id: 12, name: 'zebra', Age: 30 },
    { id: 2, name: 'Name2', Age: 30 },
    { id: 3, name: 'Name3', Age: 30 },
    { id: 4, name: 'Name4', Age: 30 },
],
colNames = ['id', 'name', 'Age'], }) => {
    const [sorted, setSorted] = useState(data);

    /** Function to sort ascending order */
    const ascOrder = (): void => {
        setSorted([].concat(sorted).sort((a: any, b: any) => a.id - b.id));
    };

    /** Function to sort descending order */
    const descOrder = (): void => {
        setSorted([].concat(sorted).sort((a: any, b: any) => b.id - a.id));
    };
    return (
        <div className="my-component-library-table-component-container">
            {data.length > 0 && (
                <table className="my-component-library-table-component" cellSpacing="0">
                    <thead className="header">
                        <tr>
                            {(colNames as any[]).map((headerItem, index) => (
                                <th key={index}>
                                    <span>{headerItem.toUpperCase()}</span>
                                    <button title={headerItem + 'ASC'} onClick={() => ascOrder()}>
                                        ↑
                                    </button>
                                    <button title={headerItem + 'DESC'} onClick={() => descOrder()}>
                                        ↓
                                    </button>
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody>
                        {Object.values(sorted).map((obj, index) => (
                            <tr key={index}>
                                {Object.values(obj).map((value, index2) => (
                                    <td key={index2}> {value} </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                    <tfoot className="my-component-library-table-component-footer"></tfoot>
                </table>
            )}
        </div>
    );
};

请改用上面的代码片段...您实际上根本没有调用排序函数...我添加了括号以在单击事件时调用它们...应该可以...让我知道否则...

排序功能在反应中不起作用 table

sorting function not working in react table

reactjs

tsx