React 中如何实现将条目从项目列表移动到收藏列表

核心逻辑非常简单：你只需要维护2个独立的数组分别存全量项目数据和收藏项目数据，点击按钮时操作两个数组的内容，再重新渲染两个列表就可以实现需求。

步骤1：提前准备HTML容器 #

你需要在页面里预留两个列表的挂载位置，代码示例如下：

<!-- 全量项目列表容器 -->
<ul id="all-items-list"></ul>

<!-- 收藏列表容器 -->
<h3>我的收藏</h3>
<ul id="favorite-list"></ul>

步骤2：定义全局存储变量 #

在你的JS代码里新增收藏数组，和你之前从API拉取的全量数组对应：

// 你之前已经定义的，用来存从API拿到的所有项目数据
let allItems = []
// 新增：用来存收藏的项目数据
let favoriteItems = []

步骤3：修改列表渲染逻辑，加入收藏按钮 #

你之前渲染全量列表的逻辑里，给每个条目新增「添加到收藏」按钮，同时给按钮加自定义属性存储对应条目的唯一ID：

// 渲染全量项目列表的函数
function renderAllList() {
  const listContainer = document.querySelector('#all-items-list')
  // 清空旧内容避免重复渲染
  listContainer.innerHTML = ''
  allItems.forEach(item => {
    const li = document.createElement('li')
    // 这里替换成你自己的项目渲染逻辑，比如渲染标题、描述、封面等
    li.innerText = item.title
    // 新增收藏按钮
    const favBtn = document.createElement('button')
    favBtn.innerText = '添加到收藏'
    // 给按钮绑定当前项目的唯一ID，点击时可以快速找到对应条目
    favBtn.dataset.itemId = item.id
    li.appendChild(favBtn)
    listContainer.appendChild(li)
  })
}

// 新增：渲染收藏列表的函数
function renderFavList() {
  const favContainer = document.querySelector('#favorite-list')
  favContainer.innerHTML = ''
  favoriteItems.forEach(item => {
    const li = document.createElement('li')
    // 渲染逻辑和全量列表保持一致即可
    li.innerText = item.title
    // 如果需要可以加「取消收藏」按钮，逻辑和添加收藏完全反向
    favContainer.appendChild(li)
  })
}

步骤4：绑定点击事件实现数据转移 #

用事件委托给全量列表绑定点击事件，不用给每个按钮单独绑定，性能更好也更简单：

document.querySelector('#all-items-list').addEventListener('click', (e) => {
  // 判断点击的元素是不是收藏按钮
  if(e.target.tagName === 'BUTTON' && e.target.innerText === '添加到收藏') {
    // 拿到当前按钮对应的项目ID
    const currentId = Number(e.target.dataset.itemId)
    // 1. 从全量数组里找到对应的项目
    const targetItem = allItems.find(item => item.id === currentId)
    // 2. 把项目加到收藏数组
    favoriteItems.push(targetItem)
    // 3. 把项目从全量数组里移除
    allItems = allItems.filter(item => item.id !== currentId)
    // 4. 重新渲染两个列表完成更新
    renderAllList()
    renderFavList()
  }
})

步骤5：对接你已有的API请求逻辑 #

你之前拉取API数据的逻辑里，把返回值赋值给allItems之后调用渲染函数即可：

// 你原有API请求逻辑，比如用fetch
fetch('你的API接口地址')
  .then(res => res.json())
  .then(data => {
    // 把API返回的全量数据赋值给allItems
    allItems = data
    // 首次渲染全量列表
    renderAllList()
  })

补充注意事项 #

• 如果你的API返回的项目没有唯一ID，可以临时用数组下标代替，优先用API返回的唯一标识更稳妥
• 如果需要刷新页面后收藏内容不丢失，可以把favoriteItems用JSON.stringify转成字符串存在localStorage里，页面初始化的时候先从localStorage读取再转成数组即可
• 如果你用的是Vue/React等前端框架，核心逻辑完全一致，不需要手动操作DOM，只要维护两个数组的内容，框架会自动完成列表渲染

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