时间戳

首页 > 解决方案 > 从一个数组中删除对象，同时将其添加到另一个数组 - React hooks

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

问题描述

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

我尝试查看此解决方案：Removing object from array using hooks (useState)但无论我尝试什么，我都只会得到“TypeError：无法读取未定义的属性'目标'” 。我错过了什么？

这是代码：

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, itemImg, 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;

标签： arraysreactjsreact-hooksuse-state

解决方案

您可以在两个阵列之间移动卡片

 const likedCards = (item) => {
    setLikedItem([...likedItem, item]);
    let filtered = cardData.filter((card) => card.itemId !== item.itemId);
    setCardData(filtered);
  };

我建议您添加空数组作为 useEffect 的第二个参数，因为您使用的是 componentDidMount。

作为第二个建议，您可以在 fetch 之前 setLoading true 并在之后 setLoading false 以减少渲染中的错误。

推荐阅读