React Instagram克隆应用实现图片顶部添加的方法

方法1：从数据库查询时直接倒序排列（推荐） #

Dexie默认按记录的id升序返回数据（新添加的记录id更大，所以排在最后），我们可以修改查询语句，让数据按id倒序返回：

修改useLiveQuery的查询逻辑：

const allPhotos = useLiveQuery(() => db.gallery.orderBy('id').reverse().toArray(), [])

这样从数据库获取到的数组本身就是新图片在前，无需额外处理渲染顺序。

方法2：前端渲染时反转数组 #

如果不想修改数据库查询逻辑，可以在渲染前对数组进行反转处理。注意要创建数组副本再反转，避免修改原数组引发副作用：

修改渲染部分的map调用：

{allPhotos?.slice().reverse().map((photo) => (
  <div className="item" key={photo.id}>
    <img src={photo.url} className="item-image" alt=""/>
    <button className="delete-button" onClick={() => {
      const deleteConfirmed = window.confirm('Are you sure?')
      if (deleteConfirmed) {
        removePhoto(photo.id)
      }
    }}>Delete</button>
  </div>
))}

这里用slice()创建数组副本，再调用reverse()反转顺序，确保新图片渲染在顶部。

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