将项目添加到另一个列表并使用 React 从那里删除答案

【问题标题】：add items to another list and remove from there with React将项目添加到另一个列表并使用 React 从那里删除
【发布时间】：2021-10-12 14:36:46
【问题描述】：

我是 React js 的新手。我正在尝试做 Pokedex 应用程序。我能够通过 Api 列出它们来获取数据。我为每个口袋妖怪制作了详细信息页面。在此详细信息页面中，我有一个按钮可以收藏这个口袋妖怪并将其移动到收藏列表并在我单击导航栏中的收藏夹时显示它。我想看一看。我也会做相反的事情（从收藏夹中删除）。我已经尝试了将近 3 天，我很困惑。请它对我来说真的很重要。我不确定我应该添加什么 cıde，所以我给出了我的项目链接。请指导我。提前致谢。

pokemonFav.js

 function PokemonFav(){
 const [fullList, setFullList] = useState([])
 const [favList, setFavList] = useState([]) 

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


 return(
     <div>
         Full List
         <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>
 )
}
  export default PokemonFav;

pokemoncard.js 我在这里添加了按钮并调用了handlefavadclick函数像这样

   <button  key={e} onClick={()=>handleFavAddClick(e)}>{e}</button>

https://github.com/yasoyase/Pokedex-app

【问题讨论】：

您可能会发现，如果您为他们提供方便，他们会更愿意提供帮助。尝试发布您遇到的问题的代码 sn-p。
我编辑了。希望有人会看到。和脚跟

标签： reactjs react-redux react-hooks

【解决方案1】：

试试这个：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [fullList, setFullList] = useState([
    { id: 1, name: "List1" },
    { id: 2, name: "List2" }
  ]);
  const [favList, setFavList] = useState([]);

  const handleFavAddClick = (e) => {
 // we find the item with current id
    const findItem = fullList.find((item) => item.id === e);
    if (findItem) {
      const checkIfIsFav = favList.find((item) => item.id === e);
      // if the item is not in fav list add it, else remove it
      if (!checkIfIsFav) {
        setFavList([...favList, findItem]);
      } else {
        setFavList(favList.filter((item) => item.id !== e));
      }
    }
  };
  return (
    <div>
      Full List
      <ul>
        {fullList.map((e) => {
          const isFav = favList.find((item) => item.id === e.id);
          return (
            <div className="flex">
              <li key={e.id}>{e.name}</li>
              <button onClick={() => handleFavAddClick(e.id)}>
                {isFav ? "Unfav" : "Fav"}
              </button>
            </div>
          );
        })}
      </ul>
      Fav List
      <ul>
        {favList.map((e) => (
          <li key={e.id}>{e.name}</li>
        ))}
      </ul>
    </div>
  );
}

【讨论】：