Javascript 需要帮助以避免在React.js中从list1复制到list2时重复数据吗

我正在创建两个列表，点击“添加”按钮后，列表1中的项目将添加到列表2中，但我无法避免在React.js的列表2中重复，并且列表1中的项目在添加到列表2中后不会受到影响。 我想创建一个函数，这样当从app.jsx中的列表1复制时，列表2中的项目不会重复，任何类型的帮助都将不胜感激

下面是我的App.js代码

import React, { useState } from 'react';
import List1 from "./List1";

import animals from "./animals";
import List2 from "./List2"
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

function App() {
 const [Id,setId]=useState();
 const[DId,setDid]=useState();
 const [item,setItem]=useState([]);


 function clickItem(id){
   console.log(id);
   setId(id);
   console.log(animals[id].name);

}

function handleClick(){
  const woo=animals[Id].name;
  console.log(animals[Id].name);
  console.log(item);
    return   

    setItem(prevValue => 
                       { return [...prevValue,woo]});



}





function deleteId(id){
 return setDid();
}

function handleDelete(){

setItem(prevName =>
  { 
return prevName.filter((item) => {
  return item !== animals[DId] ;
});
});

}




 return (
    <div>
    <p>My values are as follows</p>

    <div className="row">
      <div className="list-group col-md-5" style={{width:400}}>
      {animals.map((data,index) =>  <List1 value={data.name} key={data.id} id={data.id} clickedItem={clickItem}/> )}
      </div>
       <div className="col-md-2">
         <Button  onClick={handleClick} color="primary">Add</Button>
       </div>
       <div className="col-md-2">
         <Button  onClick={handleDelete,handleClick} color="primary">Delete</Button>
       </div>
      <div className="list-group col-md-5" style={{width:400}}>
        {item.map((data,index) =>  
        <List2 value={data} key={index} id={index}  deleteItem={deleteId} /> )
        }
      </div>
    </div>

     </div>
  );
}

export default App;

---

在handleClick方法中，将选定的动物名称添加到prevValue数组中，而不检查prevValue中是否存在选定的名称。你能做的是：

function handleClick(){
    const woo=animals[Id].name;
    console.log(animals[Id].name);
    console.log(item);

    const isAlreadyAdded = item.findIndex(existingAnimal => existingAnimal === woo) > -1;

    if(!isAlreadyAdded) {
        return setItem([...item, woo]);
    }
}

---

希望这能解决您的问题。

在handleClick方法中，您将所选动物名称添加到prevValue数组中，而不检查prevValue中是否存在所选名称。你能做的是：

function handleClick(){
    const woo=animals[Id].name;
    console.log(animals[Id].name);
    console.log(item);

    const isAlreadyAdded = item.findIndex(existingAnimal => existingAnimal === woo) > -1;

    if(!isAlreadyAdded) {
        return setItem([...item, woo]);
    }
}

希望这能解决你的问题

const animals= [
    {id:0,name:"cat"},
    {id:1,name:"owl"},
    {id:2,name:"rabbit"},
    {id:3,name:"pigeon"},
    {id:4,name:"pacman"},
    {id:5,name:"dog"},
];

export default animals;

function handleClick(){
    const woo=animals[Id].name;
    console.log(animals[Id].name);
    console.log(item);

    const isAlreadyAdded = item.findIndex(existingAnimal => existingAnimal === woo) > -1;

    if(!isAlreadyAdded) {
        return setItem([...item, woo]);
    }
}