我正在创建两个列表,点击列表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;
答案 0 :(得分:0)
在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]);
}
}
希望能解决您的问题。