React应用需求：实现卡片数组按数字升序排序并重新渲染

现有React应用中，每张卡片存储一个数字，需要对存储这些数字的数组进行排序，让应用重新渲染后卡片按数字从小到大展示。相关代码如下：

App.js #

// array of numbers
const [cardsList, setCardsList] = React.useState([]);
// function to generate random numbers
const generateNumber = (maxNumber = 100) => {
let random = Math.random() * maxNumber;
return random;
};

// function to add cards to the card list
const addCard = () => {
  let num = Math.floor(generateNumber());
  setCardsList((prev) => [...prev, num]);
};

// function that need to sort cards
const sortCards = () => {};

CardList.js #

// cards rendering
<div className="cardList">
  {props.cardList.map((number) => {
    return (
      <div className="card" key={number}>
        <div className="card-close">
          <img
            style={{ cursor: "pointer" }}
            width={16}
            height={16}
            src="/img/delete.png"
            alt="closeBtn"
          />
        </div>
        <h1>{number}</h1>
      </div>
    );
  })}
</div>

需要完善sortCards函数，实现数组排序并触发应用重新渲染。

要实现排序并触发重渲染，核心是基于原数组创建排序后的新数组，再通过setCardsList更新state——React依赖state的引用变化触发重渲染，不能直接修改原数组（state是不可变的）。

修改后的sortCards函数如下：

const sortCards = () => {
  // 复制原数组并执行从小到大排序，通过setCardsList更新state触发重渲染
  setCardsList(prev => [...prev].sort((a, b) => a - b));
};

关键细节： #

• [...prev]展开原数组创建副本，避免直接修改原state数组；
• sort((a, b) => a - b)是数字数组从小到大排序的标准写法，若需从大到小排序可改为b - a；
• 传入更新函数prev => ...确保使用最新的state值，避免闭包导致的旧值问题。

额外优化提示： #

当前代码中卡片的key直接使用number，如果生成的随机数字重复，会引发React的key冲突，导致渲染异常。建议给每个卡片添加唯一标识，比如修改addCard存储包含唯一id的对象：

// 修改addCard函数
const addCard = () => {
  let num = Math.floor(generateNumber());
  setCardsList((prev) => [...prev, { id: Date.now(), value: num }]);
};

// CardList中调整渲染逻辑
{props.cardList.map((item) => {
  return (
    <div className="card" key={item.id}>
      <div className="card-close">
        <img
          style={{ cursor: "pointer" }}
          width={16}
          height={16}
          src="/img/delete.png"
          alt="closeBtn"
        />
      </div>
      <h1>{item.value}</h1>
    </div>
  );
})}

内容的提问来源于stack exchange，提问作者Aram