React State首次点击不更新：排序按钮渲染延迟问题求助

我正在构建一个带升序（ascending）和降序（descending）排序按钮的简易数据展示系统，通过map方法遍历数组展示数据，原本在Details组件中用useEffect触发排序逻辑，但遇到了问题：首次点击按钮时页面不会立即重新渲染，第二次点击才会渲染，且展示的是首次点击的排序结果——不过console.log显示数据已经正确排序了。

现有代码片段 #

数据获取代码 #

useEffect(() => {
  fetchData();
},[])

const fetchData = () => {
  SetItems(data.items)
}

数据遍历渲染代码 #

<div>
    {items.map((item)=>
   <Details key={item.slug} item={item} />)}
</div>

Details组件内排序逻辑 #

useEffect(() => {
 if(category==='ascending'){
 const sorted = items.sort((a,b) => a.time > b.time ? 1 : -1);
 setItems(sorted);}

 if(category==='descending'){
 const sorted = items.sort((a,b) => a.time < b.time ? 1 : -1);
 setItems(sorted);}

},[category])

按钮代码 #

<button onClick={()=>setCategory('ascending')}>升序</button>
<button onClick={()=>setCategory('descending')}>降序</button>

问题具体表现 #

• 点击「升序按钮」→ 页面无变化
• 点击「降序按钮」→ 数据按升序排列
• 点击「升序按钮」→ 数据按降序排列

问题根源与修复方案 #

核心问题 #

1. Array.sort()是原地修改：它直接改变原数组，React状态更新依赖引用变化，把修改后的原数组重新setItems时，React认为数组引用没变化，不会触发渲染。
2. 排序逻辑位置错误：排序属于父组件的状态管理逻辑，放到子组件Details里会导致状态更新和渲染逻辑脱节。

修复步骤 #

1. 把排序逻辑移到父组件，基于数组副本排序

每次排序前先创建数组副本，保证setItems的是新引用的数组，触发React重新渲染：

// 父组件中处理排序逻辑
const [items, setItems] = useState([]);
const [originalItems, setOriginalItems] = useState([]);
const [category, setCategory] = useState('');

const fetchData = () => {
  // 保存原始数据副本，避免多次排序混乱
  setOriginalItems(data.items);
  setItems(data.items);
};

useEffect(() => {
  fetchData();
}, []);

// 监听category变化触发排序
useEffect(() => {
  if (!originalItems.length) return;
  
  // 创建原始数据的副本，避免修改原数据
  const sortedItems = [...originalItems];
  
  if (category === 'ascending') {
    // 数字类型的time可以直接用减法简化排序逻辑
    sortedItems.sort((a, b) => a.time - b.time);
  } else if (category === 'descending') {
    sortedItems.sort((a, b) => b.time - a.time);
  }
  
  setItems(sortedItems);
}, [category, originalItems]);

2. 简化Details组件

Details组件只负责接收props并展示内容，不再处理排序逻辑：

const Details = ({ item }) => {
  return (
    <div className="item-details">
      <p>时间：{item.time}</p>
      {/* 其他需要展示的item字段 */}
    </div>
  );
};

3. 修正按钮语法错误

补全按钮的闭合标签：

<button onClick={() => setCategory('ascending')}>升序</button>
<button onClick={() => setCategory('descending')}>降序</button>

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