javascript - 尝试根据带有按钮的标题/描述按字母顺序对挑战进行排序

Question

尝试根据带有按钮的标题/描述按字母顺序对我的挑战进行排序。控制台中没有错误，所以真的不知道在哪里看。有人可以看看我下面的代码并解释问题出在哪里吗？

    class Allchallenges extends React.Component {
        constructor() {
            super()
        this.state = {
           challenges: []
        }

        this.onDelete=this.onDelete.bind(this)
        this.sortByTitle=this.sortByTitle.bind(this)
        this.sortByDescription=this.sortByDescription.bind(this)
    }

    componentDidMount(){
        axios({
            method: "GET",
            url: `${process.env.REACT_APP_API_BASE}/allchallenges`,
            withCredentials: true
        })
        .then(response => {
            console.log(response)
            let challengeslist = response.data;
            this.setState({challenges: challengeslist})
        })
        .catch(error => {
            console.log("You've made an error charles: ",error)
        })
    }

    onDelete(challengeId){
        axios
        .delete(`${process.env.REACT_APP_API_BASE}/allchallenges/${challengeId}`)
        .then(response => {
            const challenges = this.state.challenges.filter(challenge => challenge._id !== challengeId)
            this.setState({challenges})
        })
        .catch(err => console.log(err))
    }

    sortByTitle() {
        let challengesSortTitle = this.state.challenges.sort((a,b) => {
            return a.title - b.title
        })
        this.setState({
            challenges:challengesSortTitle
            // challengesSortTitle
        })
    }

    sortByDescription() {
        let challengesSortDescription = this.state.challenges.sort((a,b) => {
            return a.description - b.description
        })
        this.setState({
            challenges:challengesSortDescription
            // challengesSortDescription
        })
    }

    render() {
        return (
            <DefaultLayout>
                <div className="challengeoverviewlist">
                    <h1>All challenges</h1>   

                    <div className="sortingbuttons">
                        <button onClick={this.sortByTitle} className="sorttitle">
                            Sort based on TITLE
                        </button>

                        <button onClick={this.sortByDescription} className="sortdescription">
                            Sort based on DESCRIPTION
                        </button>

                    </div>

                    <div className="challengeboxes">
                        {    
                        this.state.challenges.map(challenge => 
                            (

                                <div className="totalbox" key={challenge._id}>

                                    <Challengebox 
                                        key={challenge._id} 
                                        id={challenge._id} 
                                        title={challenge.title} 
                                        description={challenge.description}
                                    />

                                    <button className="deletebutton" onClick={() => this.onDelete(challenge._id)}>
                                        Delete
                                    </button>

                                </div>
                            ))                                                                      
                        }
                    </div>

                </div>    
            </DefaultLayout>
        )
    }
}

export default Allchallenges

标签： javascriptreactjs

Answer 1

您正在尝试根据图块或描述对挑战进行排序，我假设这些字段的类型为“字符串”。作为字符串，您不能使用语法return a.title - b.title对它们进行排序（它总是会导致NaN）。要使您的功能按您期望的方式工作，您必须提供一个比较器来排序功能，如下所示：

    sortByTitle() {
        let challengesSortTitle = this.state.challenges.sort((a,b) => {
            return a.title > b.title ? 1 : -1;
        })
        this.setState({
            challenges:challengesSortTitle
            // challengesSortTitle
        })
    }

    sortByDescription() {
        let challengesSortDescription = this.state.challenges.sort((a,b) => {
            return a.title > b.title ? 1 : -1;
        })
        this.setState({
            challenges:challengesSortDescription
            // challengesSortDescription
        })
    }

要了解它返回1or-1的原因，请查看sort 函数定义。