reactjs - React 组件中的排序

Question

编辑我需要使用按钮在容器组件内按字母顺序对团队卡进行排序。目前，代码按字母顺序排序，无需按下按钮，因为我已将排序逻辑映射到状态。语法方面，我应该如何让它仅在单击按钮时进行排序以及排序本身应该在哪里完成？

我之前已经使用reducer case和action来完成排序，但现在想在不使用actions或reducers的情况下只使用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

似乎您想维护团队卡数组的“本地”副本，并有选择地对该数组进行排序，从而使 Redux 状态中的事实来源保持/完整。

您只需要一个组件状态变量来保存未排序或已排序的数组以供显示。

这是一个非常精简的版本:

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>
    );
  }
}