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

Question

我有一个应用程序，用户可以 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)

即使我对它进行排序，它总是对我的列表后代顺序进行排序(较新的帖子位于顶部)。如何修复它而不每次都渲染它？

Answer 1

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

  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 ]