单击时按降序和升序排序

Question

我正在对表格进行排序，当我单击时，顺序变为升序而不是降序。我有一个布尔值，应该切换真或假，但它会不断注销初始值。有人可以帮我理解为什么 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>

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