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

【问题标题】：Need help to avoid repetation of data while copying from list1 to list2 in React.js在 React.js 中从 list1 复制到 list2 时需要帮助以避免重复数据
【发布时间】：2020-09-26 13:07:48
【问题描述】：

我正在创建两个列表，点击添加按钮时，列表 1 中的项目被添加到列表 2，但我无法避免 React.js 中列表 2 中的重复。列表 1 中的项目不会添加到 list2 后受影响。我想创建一个函数，这样在从 app.jsx 中的 list1 复制时，项目不会在 list2 中重复，任何类型的帮助都将受到高度赞赏。

下面是我的 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;

List1 的代码：

import React, { useState } from "react";

import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';


function List1(props){

  const [hstate,setState]=useState(true);

  function handleState(ps){
 (hstate)? setState(false):setState(true);
 props.clickedItem(ps.target.id);  
}



return(



  <li id={props.id} href="#" onClick={handleState} className={hstate === true ?"list-group-item list-group-item-action":"list-group-item list-group-item-action active"}>
   {props.value}
   </li>

  );

}
export default List1;

来自列表的代码：2

import React, { useState } from "react";




function List2(props){


   const [hstate,setState]=useState(true);

  function handleState(ps){
 (hstate)? setState(false):setState(true);
 props.deleteItem(ps.target.id);  
}
return(
    <li id={props.id} href="#" onClick={handleState} className={hstate === true ?"list-group-item list-group-item-action":"list-group-item list-group-item-action active"}>
   {props.value}

  </li>
);

}
export default List2;

动物代码，jsx

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;

【问题讨论】：

标签： javascript reactjs react-functional-component

【解决方案1】：

在您的 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]);
    }
}

希望能解决您的问题。

【讨论】：