Как отфильтровать массив даты onClick вне функции map?

#javascript #reactjs

Вопрос:

Я, наконец, начинаю понимать, как передавать и извлекать данные с помощью 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">amp;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;

1. Я не уверен, что вы пытаетесь сделать.

2. NVM Я думаю, что сделанное редактирование легче понять

3. Вы захотите использовать это. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…

4. не могли бы вы, пожалуйста, показать, как данные выглядят в вашем состоянии?

Ответ №1:

Вы можете просто отсортировать movies массив по состоянию в SortASC .

Вот так:

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

И если вы хотите отсортировать по убыванию, вы можете поменять местами 1 и -1 .

1. Да благословит тебя Бог, мой друг. Работает как по волшебству, еще один вопрос, как я могу отменить свое действие после второго нажатия?

2. Это решение разрушает исходный порядок, поэтому вы могли бы сохранить исходные фильмы без изменений, но затем также иметь displayMovies массив в состоянии, которое фактически было бы отображено. Итак, для сброса вам понадобится также переменная, чтобы проверить, отсортирован ли порядок в данный момент, и если да, то скопируйте оригинал movies в displayMovies , иначе скопируйте movies.sort в displayMovies , но это, возможно, становится немного сложнее. Возможно, лучший способ сделать это — просто предложить другие способы сортировки фильмов вместо отмены (например, alphabeticalDesc, numberInStock).

3. Вы правы! Продолжайте в том же духе, я создам несколько фильтров для рейтинга жанра и названия, а также для акций! Приветствия!

Ответ №2:

вы хотите что-то вроде: arr.sort((titleA, titleB) => titleA - titleB)

хотя это может стать немного сложнее (проверка на одинаковые / повторяющиеся заголовки и т.д.)