ReactJS多组件间排序后的数据传递问题求助

你的核心问题是：排序后的结果没有存入组件状态，子组件始终接收原始数据，所以不会更新渲染。同时当前代码还有几个逻辑错误，下面直接给修正方案：

问题分析 #

1. 仅用ascending状态标记排序方向，但没有基于这个状态生成新的渲染数据
2. handleSortDesc里只是临时排序并打印，没有把排序后的数据更新到状态中
3. 排序逻辑写反了：a.regularSeatsLeft - b.regularSeatsLeft是升序，降序需要改成b.regularSeatsLeft - a.regularSeatsLeft
4. 循环遍历data的方式不合理，且重复调用setAscending会导致不必要的重渲染

修正后的父组件代码 #

// 新增状态存储要渲染的最终数据，初始值为原始data
const [displayData, setDisplayData] = useState(data);
const [isAscending, setIsAscending] = useState(true);

const handleSortToggle = () => {
  // 对当前展示的数据进行排序，生成新数组（避免修改原始数据）
  const sortedData = displayData.map(auditorium => ({
    ...auditorium,
    // 复制representations数组后再排序，不修改原数组
    representations: [...auditorium.representations].sort((a, b) => {
      return isAscending 
        ? a.regularSeatsLeft - b.regularSeatsLeft // 升序
        : b.regularSeatsLeft - a.regularSeatsLeft; // 降序
    })
  }));
  
  setDisplayData(sortedData);
  // 切换排序方向
  setIsAscending(!isAscending);
};

return (
  <div className="auditorium-container"> 
    {displayData.map(d => (
      <div key={d.name} className={`auditorium auditorium-${d.id}`} >
        <div className="auditorium-header">
          <h2>{d.name}</h2>
          <button type="button" className="button" onClick={handleSortToggle} >
            {isAscending ? 'SORT DESC' : 'SORT ASC'}
          </button>
        </div>   
        {/* 传递排序后的displayData给子组件 */}
        <Representation data={displayData} /> 
      </div>
    ))}
  </div>
);

子组件优化建议（可选） #

当前子组件会遍历所有auditorium，而父组件已经在循环渲染每个auditorium，其实可以优化成父组件只传递当前auditorium的representations给子组件，避免重复遍历：

优化后的父组件传参 #

// 父组件循环内修改
<Representation representations={d.representations} /> 

优化后的子组件代码 #

const Representation = ({ representations }) => {
  return (
    <div>
      {representations.map(r => (
        <div className="representation" key={`${r.date}-${r.time}`}>
          <span className="time">{r.date} - {r.time}</span>
          <span className="label">Seats Remaining:</span>
          <span className={r.regularSeatsLeft > 0 ? 'available' : '' }>
            {r.regularSeatsLeft || 0}
          </span> 
        </div>
      ))}
    </div>
  );
};

关键说明 #

• 始终通过状态管理渲染数据：排序后的结果必须存入useState，React才会触发组件重渲染
• 避免直接修改原始数据：使用扩展运算符...复制数组和对象，保证数据不可变性
• 排序方向切换：通过isAscending状态控制排序逻辑，实现升/降序切换

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