如何在 React 中将项目从项目列表移动到收藏列表 [关闭]

Question

我是 React 的初学者。我对反应不太了解。我能够从 API 获取数据并列出它们。我通过观看视频做到了这一点。我想要的是我想添加按钮，它说添加到每个项目的收藏夹，当我单击它时。我想将该项目从该列表移动到收藏夹列表。我怎样才能做到这一点？请像我是编程新手一样解释。感谢您的宝贵时间。

Answer 1

你可以试试类似的，

function DummyComponent(){
  const [fullList, setFullList] = useState(['item1', 'item2', 'item3', 'item4'])
  const [favList setFavList] = useState([]) 

  const handleFavAddClick=(e)=>{
      setFavList(preState=>[...preState, e])
      setFullList(preState=> preState.filter(item => item !== e))
  }


  return(
      <div>
          Full List (add to fav by clicking them)
          <ul>
           {
               fullList.map(e=> <li key={e} onClick={()=>handleFavAddClick(e)}>{e}</li>)
           }
          </ul>

          Fav List
          <ul>
           {
               favList.map(e=> <li key={e}>{e}</li>)
           }
          </ul>
      </div>
  )
}

Answer 2

所以，假设您有两个列表：

const [items, setItems] = useState([]);
const [favorites, setFavorites] = useState([]);

您可以使用此功能来实现您想要的。如果您想将一个项目从items 列表完全移动到favorites，请将false 作为第二个参数传递，或者根本不传递它。但如果您只想将项目复制到favorites 列表，请传递true。

function moveToFavorites(id, copy) {
   setFavorites([...favorites, items.find(item => item.id === id)]);
   if(!copy) setItems(items.filter(item => item.id !== id));
}

Answer 3

您从 api 收到的列表是 JSON 对象的形式。根据数据的结构方式，您可能会将列表放在数组中，或者仍然是扁平的。

例子：

一）

List: {
name: "john",
},
{
name: "jane"}
}

B) 列表：{列表：["john", "jane"]}

理想情况下，您需要选项 B。这意味着您的列表位于数组中。查找有关如何将 JSON 转换为数组的文档。 lodash 库中有很多很棒的功能可供您使用。

一旦您的列表放入数组中，您就应该准备好添加和删除收藏夹了。示例：

let myList = ["john","jane"]

您要做的是拥有另一个称为收藏夹的数组。当用户单击列表中的某个项目时，它将被添加到他们的收藏夹数组中。您正在从一个阵列和另一个阵列中删除。这是一个示例函数。

let myList = ["john","jane"]; // list from api
let favorites = [] // your new list


//this function recieves the index (position) of the item the user clicked in the user interface

const addFavorites = (index) => {
  favorites.push(myList[index]) // adds items to favorites array
  myList.splice(index, 1); // removes same item from myList
  
}

// call the function
addFavorites(0) // will remove john
console.log(favorites)
console.log(myList)

}