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

Question

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

我试着查看这个解决方案：但我只得到 "TypeError: Cannot read 属性 'target' of undefined"无论我尝试什么。我错过了什么？

这是代码：

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

您可以使用

在两个数组之间移动卡片

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

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

作为第二个建议，您可以在获取之前设置加载为真，在获取之后设置加载为假，以减少渲染中的错误。

Answer 2

你在调用 handleRemoveItem 时没有参数，但是那个函数正在用 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);
};

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

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

Removing object from one array while simultaneously adding it to a different array - React hooks

arrays

reactjs

react-hooks

use-state