单击时按降序和升序排序

Posted 2023-02-22

【中文标题】单击时按降序和升序排序

【英文标题】：Sort descending and ascending on click

【发布时间】：2021-01-23 01:22:29

【问题描述】：

我正在对表格进行排序，当我单击时，顺序变为升序而不是降序。我有一个布尔值，应该切换真或假，但它会不断注销初始值。有人可以帮我理解为什么 if 语句不起作用吗？还有我排序的时候如何返回到原来的数组？

 let sortDirection = false;
    const sortTable = (key) => 
        sortDirection = !sortDirection
        const clonedOptions = [...listOfOptions];
        clonedOptions.sort((a, b) => 
            return sortDirection ? a[key] - b[key] : b[key] - a[key];
        )
        setListOfOptions(clonedOptions);
    

 <div className="outputs" >
                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th onClick=() => sortTable('clock')>Date </th>
                            <th onClick=() => sortTable('name')>Stock Name</th>
                            <th onClick=() => sortTable('price')>Price Of Option</th>
                            <th onClick=() => sortTable('amountOfOptions')>Number Of Options</th>
                            <th onClick=() => sortTable('totalAmountSpent')>Total Amount Spent</th>
                            <th onClick=() => sortTable('optionPriceSoldAt')>Option Sold At</th>
                            <th onClick=() => sortTable('amountOfOptionsSold')>Amount Of Options Sold</th>
                            <th onClick=() => sortTable('totalProfit')>Proft</th>
                        </tr>
                    </thead>
                    listOfOptions.map((option) => 
                        return (
                            <tbody key=uuidv1()>
                                <tr>
                                    <td title="delete" onClick=() => deleteOption(option.id)><span className="delete">x</span></td>
                                    <td>option.clock</td>
                                    <td>option.name.toUpperCase()</td>
                                    <td>$option.price</td>
                                    <td>option.amountOfOptions</td>
                                    <td>$option.totalAmountSpent.toFixed(2)</td>
                                    <td>$option.optionPriceSoldAt</td>
                                    <td>option.amountOfOptionsSold</td>
                                    <td style= color: option.totalProfit >= 0 ? 'green' : 'red' >$option.totalProfit.toFixed(2)</td>
                                </tr>
                            </tbody>
                        )
                    )
                </table>
            </div>
        </div>

【参考方案1】：

您需要将布尔值放入 state，否则，在每次渲染时，它将以 false 开头：

const [sortDirection, setSortDirection] = useState(false);
const sortTable = (key) => 
    setSortDirection(!sortDirection);
    const clonedOptions = [...listOfOptions];
    clonedOptions.sort((a, b) => 
        return sortDirection ? b[key] - a[key] : a[key] - b[key];
    )
    setListOfOptions(clonedOptions);

【讨论】：

这样做了，但为什么原来的方式不起作用。本质上不是一回事吗。

它们根本不是一回事 - 您原来的方法是在每次渲染时将 false 分配给一个新的 sortDirection 变量。它永远不会改变，除了在即将被 GC 处理的旧 sortTable 函数中。要保留不同渲染的值，您需要使用 state、ref 或类似的东西。

我还是 javascript 新手，但 if 语句不应该处理布尔值。对不起，我只是想了解这些问题。感谢您的快速回复。

代码中没有任何if 语句？我不知道你指的是什么

return 语句不是 if 语句