React函数式组件更新状态后UI未同步，排序功能异常求助

问题根源：Array.sort()是原地排序方法，会直接修改原数组（也就是你state中的names）。当你调用setNames(names)时，传递的还是同一个数组引用，React对比新旧state时发现引用未发生变化，因此不会触发组件重渲染，导致UI无法同步更新。

修复方案：排序前先创建原数组的副本，对副本进行排序操作，再将新的数组传递给setNames，确保state引用发生变化。

修改后的完整代码：

import './App.css';
import { useState } from 'react';

function App() {
  const [names, setNames] = useState([{ name: 'John', age: 23 }, { name: 'Mary', age: 31 }, { name: 'Anna', age: 18 }, { name: 'Mark', age: 21 }])
  
  function sort(sortBy) {
    // 创建原数组的副本
    const sortedNames = [...names];
    if (sortBy === 'name') {
      sortedNames.sort((a, b) => {
        return a.name.localeCompare(b.name);
      })
    } else if (sortBy === 'age') {
      sortedNames.sort((a, b) => b.age - a.age)
    }
    // 更新state为新数组
    setNames(sortedNames);
  }

  return (
    <div>
      <table>
        <tr>
          <th><span style={{ cursor: 'pointer' }} onClick={() => sort('name')}>Name</span></th>
          <th><span style={{ cursor: 'pointer' }} onClick={() => sort('age')}>Age</span></th>
        </tr>
        {names.map((data, index) => (
          <tr key={index}>
            <td> {data.name}  </td>
            <td> {data.age}  </td>
          </tr>
        ))}
      </table>
    </div>
  );
}

export default App;

额外优化点：

• 用localeCompare替代手动字符串比较，更符合多语言字符串排序规范
• 给map循环的元素添加key属性，符合React列表渲染的最佳实践

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