Question

我终于开始了解如何使用React传递和检索数据。但是我有一个问题，当我单击标题时，我要使用单击处理程序this.SortASC，我想根据字母顺序对标题进行排序。

我正在努力使它工作..我知道如何解决这个问题吗？

谢谢。

我的代码：

import React, { Component } from 'react';

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

class Movies extends Component {
    state = {
        movies: getMovies(),
    };

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

    SortASC = () => {
        console.log('Sorted');
    };

    render() {
        return (
            <React.Fragment>
                {this.state.movies.length > 0 ? (
                    <div className="m-2">
                        <p>
                            Showing {this.state.movies.length} in the database.
                        </p>
                        <table className="table table-striped table-dark">
                            <thead>
                                <tr>
                                    <th scope="col" onClick={this.SortASC}>
                                        Title
                                    </th>
                                    <th scope="col">Genre</th>
                                    <th scope="col">Stock</th>
                                    <th scope="col">Rate</th>
                                    <th scope="col">&nbsp;</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>
                    </div>
                ) : (
                    <h4 className="m-4">
                        There are no movies in the database.
                    </h4>
                )}
            </React.Fragment>
        );
    }
}

export default Movies;

Answer 1

您可以将movies中处于状态的SortASC数组排序。

赞：

SortASC = () => {
    const { movies } = this.state;
    this.setState({
        movies: movies.sort((a, b) => a.title > b.title ? 1 : -1)
    })
};

如果要对降序进行排序，则可以交换1和-1。

Answer 2

您想要类似的内容：arr.sort((titleA, titleB) => titleA - titleB)

尽管它会变得更复杂（检查相同/重复的标题等）

如何过滤日期onClick外部地图函数数组？

2 个答案: