Сортировка в компоненте React

Question

РЕДАКТИРОВАТЬ Мне нужно отсортировать карточки команд по алфавиту внутри моего компонента Контейнера с помощью кнопки. На данный момент код сортируется в алфавитном порядке без нажатия кнопки, так как у меня есть логика сортировки c, сопоставленная с состоянием. Синтаксис, как мне сортировать его только при нажатии кнопки и где должна быть выполнена сама сортировка?

Ранее у меня была сортировка с использованием регистра редуктора и действия, но теперь я хочу сделать это без использования действий или редукторов и просто с помощью React.

Контейнер, который отображает карты:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';

import TeamCard from '../components/TeamCard'
import { displayObject } from '../actions/dataActions'

import CardColumns from 'react-bootstrap/CardColumns'

class DataContainer extends Component {
  state = {
    teamCards: [...this.props.teams.cards]
  };

  sortTeamCards = () => {
    this.setState(prevState => ({
      teamCards: [...prevState.teamCards].sort(function(team1, team2) {
        if (team1.name < team2.name) {
          return -1;
        }
        if (team1.name > team2.name) {
          return 1;
        }
        return 0;
      }),
    }))
  }

  displayCards = () => {
      switch(this.props.path) {
          case "teams":
              return (this.props.teams.cards.map(card => (
                  <NavLink style={{ color: "black" }} to={`/teams/${card.id}`} key={card.id}><TeamCard view={this.props.displayObject} info={card} /></NavLink>
              )));

          default:
              return (<div>Empty</div>)
      }
  };

  render() {
      return (
          <CardColumns>
              <button id="sort-button" title="Sort Teams" onClick={this.sortTeamCards}>Sort Teams</button>
              {this.displayCards()}
          </CardColumns>
        )
     }
  }

  const mapStateToProps = state => {
      return {
          teamCards: state.teams,
          teams: state.teams
      }
  };

  const mapDispatchToProps = dispatch => {
      return {
          displayObject: (id, category, type) => dispatch(displayObject(id, category, type)),
      }
  };

  export default connect(mapStateToProps, mapDispatchToProps)(DataContainer)

Answer 1

Кажется, вы хотите сохранить «локальную» копию массива командных карт и выборочно отсортировать этот массив, оставив источник правды в вашем состоянии избыточности сохраненным / нетронутым.

Вам просто понадобится компонент Переменная состояния для хранения несортированного или отсортированного массива для отображения.

Вот очень перегруженная версия:

const teamSortFn = (team1, team2) => {
  if (team1.name < team2.name) {
    return -1;
  }
  if (team1.name > team2.name) {
    return 1;
  }
  return 0;
}

class DataContainer extends Component {
  state = {
    // copy props to state to play with and not mutate external refs
    teamCards: [...this.props.teams.cards],
  };

  ...

  sortTeamCards = () => {
    this.setState(prevState => ({
      teamCards: [...prevState.teamCards].sort(teamSortFn),
    }))
  }

  ...

  render() {
    return (
      <CardColumns>
        <button
          id="sort-button"
          title="Sort Teams"
          onClick={this.sortTeamCards}
        >
          Sort Teams
        </button>
        {this.displayCards()}
      </CardColumns>
    );
  }
}

Answer 2

Хорошо, я изменил свой контейнер на это, и, кажется, он исправил кнопку.

import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import { NavLink } from "react-router-dom";

import TeamCard from "../components/TeamCard";
import PlayerCard from "../components/PlayerCard";
import StarPlayerCard from "../components/StarPlayerCard";
import { displayObject } from "../actions/dataActions";

import CardColumns from "react-bootstrap/CardColumns";

class DataContainer extends Component {
  state = {
    teams: this.props.sort_teams
  };

   sortTeams = () => {
    this.props.sort_teams.cards.sort(function(team1, team2) {
        if (team1.name < team2.name) {
          return -1;
        }
        if (team1.name > team2.name) {
          return 1;
        }
        return 0;
      });
      this.setState({
        teams: this.props.sort_teams
      });
  };

  displayCards = () => {
      switch(this.props.path) {
          case "teams":
              return (this.props.teams.cards.map(card => (
                  <NavLink style={{ color: "black" }} to={`/teams/${card.id}`} key={card.id}><TeamCard view={this.props.displayObject} info={card} /></NavLink>
              )));

          case "players":
              return (this.props.players.cards.map(card => (
                  <NavLink style={{ color: "black" }} to={`/players/${card.id}`} key={card.id}><PlayerCard view={this.props.displayObject} info={card} /></NavLink>
              )));

          case "star_players":
              return (this.props.star_players.cards.map(card => (
                  <NavLink style={{ color: "black" }} to={`/star_players/${card.id}`} key={card.id}><StarPlayerCard view={this.props.displayObject} info={card} /></NavLink>
              )));

          default:
              return (<div>Empty</div>)
      }
  };

  render() {
      return (
        <Fragment>
          <div>
            <button id="sort-button" title="Sort Teams" onClick={this.sortTeams}>Sort Teams</button>
          </div>
          <CardColumns>{this.displayCards()}</CardColumns>
        </Fragment>
      );
    }
  }

  const mapStateToProps = state => {
      return {
          sort_teams: state.teams,
          teams: state.teams,
          players: state.players,
          star_players: state.star_players
        }
    };

    const mapDispatchToProps = dispatch => {
        return {
            displayObject: (id, category, type) => dispatch(displayObject(id, category, type)),
        }
    };

export default connect(mapStateToProps, mapDispatchToProps)(DataContainer)