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

Question

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

我尝试查看此解决方案： 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;

Answer 1

您可以在两个 arrays 之间移动卡

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

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

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

Answer 2

您在没有 arguments 的情况下调用handleRemoveItem ，但 function 正在使用event参数执行某些操作，因此您将收到 TypeError。

似乎handleRemoveItem真的只需要知道要删除的项目 ID，因此您可以简化为：

const removeCard = id => {
  setCardData(cardData.filter(item => item.id !== id));
};

const handleLike = (itemId, itemImg, ItemTitle) => {
  setLikedItem([...likedItem, {itemId, itemImg, ItemTitle}]);
  removeCard(itemId);
};

我还注意到您有时会在调用设置后立即记录 state 变量。 那是行不通的。 直到在下一次渲染中下一次调用useState时您才会收到该值，所以如果您想记录对 state 的更改，我会登录您的渲染 function，而不是在事件处理程序中。