Question

我正在创建两个列表，点击列表1中的添加按钮项将被添加到列表2中，但是我无法避免React.js中列表2中的重复，并且列表1中的项将不会加入list2后受影响。我想创建一个函数，以便在从app.jsx中的list1复制时，列表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;

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;

Answer 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]);
    }
}

希望能解决您的问题。

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

1 个答案: