React调用setState更新排序数组后组件未重新渲染问题

React 状态更新遵循不可变数据原则，要求传入新的状态引用，才会触发重渲染：

• Array.sort() 是原地修改方法，会直接改动原数组本身，不会返回新的数组引用
• 你调用setDb时传入的还是原数组的内存引用，React浅比较检测到引用没有变化，就跳过了组件重渲染流程，所以虽然数组内容已经被修改，页面不会同步更新

排序前先对原数组做浅拷贝，基于新拷贝的数组做排序，保证传入setDb的是全新引用的数组：

const handleClick = () => {
  // 用展开运算符浅拷贝原数组，再执行排序
  const sortedList = [...db].sort((a, b) => {
    return b.price - a.price
  })
  setDb(sortedList)
}

注意：你当前写的排序逻辑b.price - a.price是价格从高到低降序，和按钮文案「Price Ascending（价格升序）」不匹配，要实现升序把判断逻辑改成a.price - b.price即可。

你当前是硬编码索引db[0]、db[1]渲染条目，后续条目数量变化时维护成本很高，建议用Array.map遍历数组统一渲染列表：

// 替换原来逐个写死的sale-body-item块
{db.map((house, idx) => (
  <div className='sale-body-item' key={idx}>
    <img src={house.img} />
    <div className='house-text'>
      <div className='house-text-item'>
        <h1>For Sale</h1>
        <p>${house.price}</p>
      </div>
      <div className='house-text-item'>
        <h1>Adress</h1>
        <p>Lorem Ipsum St.</p>
      </div>
      <div className='house-text-item'>
        <p>3 bedrooms,</p>
        <p>2 bathrooms,</p>
        <p>40m2 garden</p>
      </div>
    </div>
    {idx === 0 
      ? <Link to='/item'><button>More Information</button></Link>
      : <button>More Information</button>
    }
  </div>
))}

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