面试题：React中如何实现简单的列表排序

Question

假设你有一个包含多个对象的数组，每个对象有一个数值属性 'score' 。在React组件中，如何根据 'score' 对列表进行升序或降序排序，并展示在页面上？请写出关键代码。

Answer 1

import React, { useState } from 'react';

const MyComponent = () => {
  const data = [
    { score: 3 },
    { score: 1 },
    { score: 2 }
  ];
  const [sortOrder, setSortOrder] = useState('asc');

  const sortedData = [...data].sort((a, b) => {
    if (sortOrder === 'asc') {
      return a.score - b.score;
    } else {
      return b.score - a.score;
    }
  });

  const toggleSort = () => {
    setSortOrder(sortOrder === 'asc'? 'desc' : 'asc');
  };

  return (
    <div>
      <button onClick={toggleSort}>
        {sortOrder === 'asc'? 'Sort Descending' : 'Sort Ascending'}
      </button>
      <ul>
        {sortedData.map((item, index) => (
          <li key={index}>{item.score}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;