从一个数组中删除对象，同时将其添加到另一个数组中-React hooks

问题描述

我正在开发类似Tinder的应用，并尝试从阵列中删除当前卡，然后在单击“喜欢”或“不喜欢”按钮时移至下一张。同时，我正在尝试将该卡添加到新阵列（“喜欢”或“不喜欢”的列表）中。将对象添加到新数组似乎可以正常工作（尽管会有延迟，并且需要单击两次按钮-也需要对其进行排序），但是一旦我尝试将其从当前数组中删除，它就会全部崩溃。

我尝试查看以下解决方案：Removing object from array using hooks (useState)，但无论如何，我只会得到“ TypeError：无法读取未定义的属性'target'” 。我想念什么？

这是代码：

import React,{ useState,useEffect } from 'react';
import { Card,Button,Container } from 'react-bootstrap';

const url = 'https://swiperish-app.com/cards';

const SwiperCard = () => {
  const [cardData,setCardData] = useState([]);
  const [likedItem,setLikedItem] = useState([]);


  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(cardData => setCardData(cardData))
  });

  const handleRemoveItem = (event) => {
    const name = event.target.getAttribute("name")
    setCardData(cardData.filter(item => item.id !==name));  
  };

  const likedCards = (itemId,itemImg,ItemTitle) => {
    let likedArr = [...likedItem];
    setLikedItem(likedItem => likedItem.concat({itemId,ItemTitle}))
    handleRemoveItem();
    console.log(likedArr);
  };

  return (
      <div id="contentView">
        {cardData.map((item,index) => {
          return(
            <Card key={index} className="cardContainer" name={item.id}>
              <Container className="btnContainer">
                <div className="btnWrapper">
                  <Button className="btn" onClick={() => console.log(item.id)}>DISLIKE</Button>
                </div>
              </Container>
              <Container className="cardContentContainer">
                <Card.Img style={{width: "18rem"}}
                  variant="top" 
                  src={item.image} 
                  fluid="true" 
                />
                <Card.Body style={{width: "18rem"}}>
                  <Card.Title className="cardTitle">{item.title.toUpperCase()}</Card.Title>
                  <Card.Subtitle className="cardText">{item.body}</Card.Subtitle>
                </Card.Body>
              </Container>
              <Container className="btnContainer">
                <div className="btnWrapper">
                  <Button className="btn" onClick={() => likedCards(item.id,item.image,item.title) }>LIKE</Button>
                </div>
              </Container>
            </Card>
          )
        })}
      </div>
  );
};

export default SwiperCard;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）