时间戳

首页 > 解决方案 > 如何在反应中对 jsx 中的元素进行排序？

javascript - 如何在反应中对 jsx 中的元素进行排序？

问题描述

我有一个用户可以 CRUD 线程的应用程序，主要结构如下所示，

export default function Dashboard(){
    return(
        <Fragment>
            <CreateBoard />
            <BoardList />
        </Fragment>
     )
}

Dashboard将被调用App.js。
董事会名单

import { getBoards, deleteBoard } from "../../actions/boards"

export class BoardList extends Component {
    static propTypes = {
        boards: PropTypes.array.isRequired,
        getBoards: PropTypes.func.isRequired,
        deleteBoard: PropTypes.func.isRequired,
    }
    componentDidMount() {
        this.props.getBoards();
    }

    render(){
        return (
            <Fragment>
                <h2>Boards</h2>
                <table className="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Author</th>
                            <th>Title</th>
                            <th>Created</th>
                            <th>Updated</th>
                            <th />
                        </tr>
                    </thead>
                    <tbody>  
                   // this sort does not work
                    {this.props.boards.length > 0 && this.props.boards.sort((boardA, boardB) => boardA.id < boardB.id)
                        .map(board => (
                            <tr key={board.id}>
                                <td>{board.id}</td>
                                <td>{board.author}</td>
                                <td>{board.title}</td>
                                <td>{board.created}</td>
                                <td>{board.updated}</td>
                                <td>
                                    <button 
                                      className="btn btn-danger btn-sm"
                                      onClick={this.props.deleteBoard.bind(this, board.id)}
                                      >
                                      Delete</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </Fragment>
        )
    }
}

const mapStateToProps = state => ({
    boards: state.boards.boards
})

export default connect(mapStateToProps, {getBoards, deleteBoard})(BoardList)

即使我对其进行排序，它也总是对我的列表后代顺序进行排序（较新的帖子排在首位）。如何在不每次都渲染的情况下修复它？

标签： javascriptreactjsreact-redux

解决方案

sort在返回函数中而不是在 JSX 中可能更干净。您还需要将道具克隆到可以排序的新数组中。

  render() {
    const sortedBoard = [...this.props.boards].sort((boardA, boardB) => {
      return boardA.id > boardB.id;
    });
    const sortedRows = sortedBoard.map(board => {
      return (
        <tr key={board.id}>
          <td>{board.id}</td>
          <td>{board.author}</td>
          <td>{board.title}</td>
          <td>{board.created}</td>
          <td>{board.updated}</td>
          <td>
            <button
              className="btn btn-danger btn-sm"
              onClick={this.props.deleteBoard.bind(this, board.id)}
            >
              Delete
            </button>
          </td>
        </tr>
      );
    });

    return (
      <Fragment>
        <h2>Boards</h2>
        <table className="table table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>Author</th>
              <th>Title</th>
              <th>Created</th>
              <th>Updated</th>
              <th />
            </tr>
          </thead>
          <tbody>{this.props.boards.length && { sortedRows }}</tbody>
        </table>
      </Fragment>
    );
  }

注意sort可能有点棘手......

let a = [ '1', '2', '10', '3' ];
a.sort();
// [ '1', '10', '2', '3' ]

let b = [1, 2, 10, 3];
b.sort((x,y) => { return x-y });
// [ 1, 2, 3, 10 ]

推荐阅读