I'm working on building a drag and drop card game. I'm not familiar with using the library react-dnd I wonder if this has something to do with it. If I use data already on the file, it works fine, but if I have to fetch the data, it creates This error.

As I said, this usually happens when I use useEffect Somebody has a better idea of how to do this, please let me know.

import React, { useEffect, useState } from 'react';
import Card from './Card';
import { useDrop } from 'react-dnd';
import './Table.css';

const API_Data = [
  {
    id: 1,
    url: '.png',
  },
  {
    id: 2,
    url: '.png',
  },
  {
    id: 3,
    url: '.png',
  },
  {
    id: 4,
    url: '.png',
  },
  {
    id: 5,
    url: '.png',
  },
  {
    id: 6,
    url: '.png',
  },
];

function Table() {
  const [playersCard, setPlayersCard] = useState([]);
  const [potA, setPotA] = useState([
    {
      id: 1,
      url: '.png',
    },
  ]);
  const [potB, setPotB] = useState([]);
  /////////////////////////////////////////////////////////////////////////
  const [, dropA] = useDrop(() => ({
    accept: 'card',
    drop: (item) => handleAddToPotA(item.id),
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  }));

  const handleAddToPotA = (id) => {
    const newCard = playersCard.filter((card) => id === card.id);
    console.log(`newCard`, newCard);

    setPotA((oldCard) => [...oldCard, newCard[0]]);
  };
  //////////////////////////////////////////////////////////////////////////
  const [, dropB] = useDrop(() => ({
    accept: 'card',
    drop: (item) => handleAddToPotB(item.id),
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  }));

  const handleAddToPotB = (id) => {
    const newCard = playersCard.filter((card) => id === card.id);
    setPotB((oldCard) => [...oldCard, newCard[0]]);
    console.log(newCard);
  };

  useEffect(() => {
    setPlayersCard(API_Data);
    return () => {};
  }, []);

  //////////////////////////////////////////////////////////////////////////
  if (!playersCard) {
    return <div></div>;
  }
  return (
    <div className="table-page">
      <div className="center-table">
        <div className="pot-a" ref={dropA}>
          {potA &&
            potA.map((card) => {
              return <Card url={card?.url} id={card.id} key={card.id} />;
            })}
        </div>
        <div className="pot-b" ref={dropB}>
          {potB &&
            potB.map((card) => {
              return <Card url={card.url} id={card.id} key={card.id} />;
            })}
        </div>
      </div>
      <div className="players-card">
        {playersCard.map((card) => {
          return <Card url={card.url} id={card.id} key={card.id} />;
        })}
      </div>
    </div>
  );
}

export default Table;

I'm working on building a drag and drop card game. I'm not familiar with using the library react-dnd I wonder if this has something to do with it. If I use data already on the file, it works fine, but if I have to fetch the data, it creates This error.

As I said, this usually happens when I use useEffect Somebody has a better idea of how to do this, please let me know.

import React, { useEffect, useState } from 'react';
import Card from './Card';
import { useDrop } from 'react-dnd';
import './Table.css';

const API_Data = [
  {
    id: 1,
    url: 'https://deckofcardsapi./static/img/6H.png',
  },
  {
    id: 2,
    url: 'https://deckofcardsapi./static/img/aceDiamonds.png',
  },
  {
    id: 3,
    url: 'https://deckofcardsapi./static/img/7C.png',
  },
  {
    id: 4,
    url: 'https://deckofcardsapi./static/img/6H.png',
  },
  {
    id: 5,
    url: 'https://deckofcardsapi./static/img/aceDiamonds.png',
  },
  {
    id: 6,
    url: 'https://deckofcardsapi./static/img/7C.png',
  },
];

function Table() {
  const [playersCard, setPlayersCard] = useState([]);
  const [potA, setPotA] = useState([
    {
      id: 1,
      url: 'https://deckofcardsapi./static/img/6H.png',
    },
  ]);
  const [potB, setPotB] = useState([]);
  /////////////////////////////////////////////////////////////////////////
  const [, dropA] = useDrop(() => ({
    accept: 'card',
    drop: (item) => handleAddToPotA(item.id),
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  }));

  const handleAddToPotA = (id) => {
    const newCard = playersCard.filter((card) => id === card.id);
    console.log(`newCard`, newCard);

    setPotA((oldCard) => [...oldCard, newCard[0]]);
  };
  //////////////////////////////////////////////////////////////////////////
  const [, dropB] = useDrop(() => ({
    accept: 'card',
    drop: (item) => handleAddToPotB(item.id),
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  }));

  const handleAddToPotB = (id) => {
    const newCard = playersCard.filter((card) => id === card.id);
    setPotB((oldCard) => [...oldCard, newCard[0]]);
    console.log(newCard);
  };

  useEffect(() => {
    setPlayersCard(API_Data);
    return () => {};
  }, []);

  //////////////////////////////////////////////////////////////////////////
  if (!playersCard) {
    return <div></div>;
  }
  return (
    <div className="table-page">
      <div className="center-table">
        <div className="pot-a" ref={dropA}>
          {potA &&
            potA.map((card) => {
              return <Card url={card?.url} id={card.id} key={card.id} />;
            })}
        </div>
        <div className="pot-b" ref={dropB}>
          {potB &&
            potB.map((card) => {
              return <Card url={card.url} id={card.id} key={card.id} />;
            })}
        </div>
      </div>
      <div className="players-card">
        {playersCard.map((card) => {
          return <Card url={card.url} id={card.id} key={card.id} />;
        })}
      </div>
    </div>
  );
}

export default Table;

• javascript
• reactjs
• react-dnd

Share Follow asked Dec 13, 2021 at 12:47 manuel taverasmanuel taveras 11111 gold badge11 silver badge44 bronze badges 1

• something that I forgot to mention the error doesn't happen on playerCard.it occurs when I try to move the card from playerCard to potA or potB – manuel taveras Commented Dec 13, 2021 at 13:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 0

Because playersCard is not initialized yet.

try to check undefined first

<div className="players-card">
        {playersCard.length > 0 && playersCard.map((card) => {
          return <Card url={card.url} id={card.id} key={card.id} />;
        })}
      </div>

The useDrop() hook from react-dnd takes two arguments: the config function, and a dependency array used to indicate whether the config function can be memo-ized.

• 发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744861434a4597727.html