Javascript 单击两次时如何从状态切换排序数组数据？

创建了按评级、库存和标题进行排序的多个函数。如果可能的话，我尝试做的是按实例“切换”排序电影标题ASC顺序，然后第二次单击DESC。尝试创建默认布尔值

isSorted:false

，并基于单击将isSorted设置为true，如果是，则从B排序为a

我现在和React一起工作了一个月，如果有人能对我的代码给予一些积极的反馈，我会非常感激，这样我在React中会变得更好

我的反应代码：

import React, { Component } from 'react';

import { getMovies } from '../services/fakeMovieService';

class Movies extends Component {
    state = {
        isSorted: false,
        movies: getMovies(),
        isDisabled: true,
    };

    // Display all movies but not the one selected.
    handleDelete = movie => {
        this.setState({
            movies: this.state.movies.filter(m => m._id !== movie._id),
            isDisabled: false,
        });

        console.log(`Movie ${movie.title} deleted.`);
    };

    // Sort all video's by title
    sortByTitle = () => {
        this.setState({
            movies: this.state.movies.sort((a, b) =>
                a.title > b.title ? 1 : -1
            ),
            isDisabled: false,
        });

        console.log('sorted by title');
    };

    // Sort all video's by genre
    sortByGenre = () => {
        this.setState({
            movies: this.state.movies.sort((a, b) =>
                a.genre.name > b.genre.name ? 1 : -1
            ),
            isDisabled: false,
        });
        console.log('sorted by genre.');
    };

    // sort all video's by stock size
    sortByStock = () => {
        this.setState({
            movies: this.state.movies.sort(
                (a, b) => a.numberInStock - b.numberInStock
            ),
            isDisabled: false,
        });

        console.log('sorted by stock size.');
    };

    // Sort all video's by rating score
    sortByRating = () => {
        this.setState({
            movies: this.state.movies.sort(
                (a, b) => a.dailyRentalRate - b.dailyRentalRate
            ),
            isDisabled: false,
        });

        console.log('sorted by rating sore.');
    };

    // Add class to the reset button based on the current filter state.
    resetButtonClass = () => {
        let btnClass = 'btn btn-sm btn-';
        btnClass += this.state.isDisabled ? 'warning' : 'primary';
        return btnClass;
    };

    // Reset the video's filter
    resetFilter = () => {
        this.setState({
            movies: [...getMovies()],
            isDisabled: true,
        });

        console.log('Reset movies database.');
    };

    render() {
        const { length: count } = this.state.movies;

        // Check if there are movies available.
        if (count === 0)
            return (
                <React.Fragment>
                    <h4>There are no movies in the database.</h4>
                    <button
                        type="button"
                        onClick={this.resetFilter}
                        className="btn btn-primary btn-sm">
                        Reset
                    </button>
                </React.Fragment>
            );

        return (
            <React.Fragment>
                <h5 className="pb-2">Showing {count} in the database.</h5>
                <table className="table table-striped table-dark">
                    <thead>
                        <tr>
                            <th onClick={this.sortByTitle}>Title</th>
                            <th onClick={this.sortByGenre}>Genre</th>
                            <th onClick={this.sortByStock}>Stock</th>
                            <th onClick={this.sortByRating}>Rate</th>
                            <th scope="col">
                                <button
                                    onClick={this.resetFilter}
                                    className={this.resetButtonClass()}
                                    disabled={this.state.isDisabled && true}>
                                    Reset filter
                                </button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.movies.map(movie => {
                            const {
                                _id,
                                title,
                                genre,
                                numberInStock,
                                dailyRentalRate,
                            } = movie;

                            return (
                                <tr key={_id}>
                                    <th>{title}</th>
                                    <td>{genre.name}</td>
                                    <td>{numberInStock}</td>
                                    <td>{dailyRentalRate}</td>
                                    <td>
                                        <button
                                            onClick={() =>
                                                this.handleDelete(movie)
                                            }
                                            className="btn btn-danger btn-sm">
                                            Delete
                                        </button>
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </React.Fragment>
        );
    }
}

export default Movies;

import React，{Component}来自'React'；
从“../services/fakeMovieService”导入{getMovies}；
类扩展组件{
状态={
isSorted:错，
电影：getMovies（），
isDisabled:是的，
};
//显示所有电影，但不显示选定的电影。
handleDelete=电影=>{
这是我的国家({
电影：this.state.movies.filter（m=>m.\u id！==movie.\u id），
isDisabled:错误，
});
log（`Movie${Movie.title}已删除。`）；
};
//按标题对所有视频进行排序
sortByTitle=（）=>{
这是我的国家({
电影：this.state.movies.sort（（a，b）=>
a、 标题>b.标题？1:-1
),
isDisabled:错误，
});
log（“按标题排序”）；
};
//按类型对所有视频进行排序
sortByGenre=（）=>{
这是我的国家({
电影：this.state.movies.sort（（a，b）=>
a、 genre.name>b.genre.name？1:-1
),
isDisabled:错误，
});
log（'按类型排序'）；
};
//按库存大小对所有视频进行排序
sortByStock=（）=>{
这是我的国家({
电影：this.state.movies.sort(
（a，b）=>a.numberInStock-b.numberInStock
),
isDisabled:错误，
});
console.log（'按库存大小排序'）；
};
//按评分对所有视频进行排序
排序时间=（）=>{
这是我的国家({
电影：this.state.movies.sort(
（a，b）=>a.dailyRentalRate-b.dailyRentalRate
),
isDisabled:错误，
});
log（'按评级排序'）；
};
//根据当前筛选器状态将类添加到重置按钮。
resetButtonClass=（）=>{
设btnClass='btn btn sm btn-'；
btnClass+=this.state.isDisabled？'warning'：'primary'；
返回btnClass；
};
//重置视频的过滤器
重置筛选器=（）=>{
这是我的国家({
电影：[…getMovies（）]，
isDisabled:是的，
});
log（'Reset movies database'）；
};
render（）{
const{length:count}=this.state.movies；
//检查是否有电影可用。
如果（计数==0）
返回(
数据库中没有电影。
重置
);
返回(
在数据库中显示{count}。
标题
体裁
股票
比率
复位滤波器
{this.state.movies.map（movie=>{
常数{
_身份证，
标题
体裁
数字股票，
dailyRentalRate，
}=电影；
返回(
{title}
{genre.name}
{numberInStock}
{dailyRentalRate}
这是Handledelet（电影）
}
className=“btn btn危险btn sm”>
删除
);
})}
);
}
}
导出默认电影；

附言。 我的代码是否清晰易懂

提前谢谢

问候,，

---

尼诺你可以这样做

这里的想法是基于

排序

键的值，我们设置排序函数的返回值，然后切换

排序

键的值

让obj={
数据：[5,4,3,2,1,0]，
分类：“dsc”
}
//让我们先点击一下
对象数据排序（（a，b）=>obj.sorted==='asc'？b-a:a-b）
obj.sorted=obj.sorted==“asc”？”dsc'：'asc'
控制台日志（对象数据）
//让第二次点击结束
对象数据排序（（a，b）=>obj.sorted==='asc'？b-a:a-b）
obj.sorted=obj.sorted==“asc”？”dsc'：'asc'
console.log（obj.data）

您可以这样做

这里的想法是基于

排序

键的值，我们设置排序函数的返回值，然后切换

排序

键的值

让obj={
数据：[5,4,3,2,1,0]，
分类：“dsc”
}
//让我们先点击一下
对象数据排序（（a，b）=>obj.sorted==='asc'？b-a:a-b）
obj.sorted=obj.sorted==“asc”？”dsc'：'asc'
控制台日志（对象数据）
//让第二次点击结束
obj.data.sort（（a，b）=>obj.sorted==='asc'
sortByTitle = () => {
        let movies = this.state.movies
        let isSorted = !this.state.isSorted

        if (!this.state.isSorted){
            movies = movies.sort((a, b) =>
                a.title > b.title ? 1 : -1
            )
        } else {
            movies = movies.sort((a, b) =>
                a.title > b.title ? -1 : 1 
            )
        }

        this.setState({
            isDisabled: false,
            movies, isSorted
        });

        console.log('sorted by title');
    };

function computeSort(sort) {
   switch(state) {
      case 'TITLE_ASC':
         return 'TITLE_DESC'
     ... more cases here
   }
}

 sort = (sortProp) => {
    switch(sortProp) {
       case 'TITLE':
         this.setState({
            sort: this.state.sort === 'TITLE_ASC' ? 'TITLE_DESC' : 'TITLE_ASC';
         });
       ... more cases here
    }
 }


 render() {
 <th onClick={ () => this.sort('TITLE')}>Title</th>