функция случайного вызова вызывается каждый раз, когда состояние обновляется? - PullRequest
Новая
       93

функция случайного вызова вызывается каждый раз, когда состояние обновляется?

0 голосов
/ 14 апреля 2020

Проблема просто в том, что у меня есть функция перетасовки, которая перетасовывает массив чисел, числа, представленные как карты в колоде, приложение простое, оно требуется, когда при нажатии двух карт с одинаковым номером они получают одинаковый цвет.

, поэтому я создал состояние, которое представляет собой массив, который получает только две карты для сравнения, после завершения сравнения длина массива возвращается к 0, затем pu sh снова две карты и т. Д.

теперь проблема в том, что функция тасования работает снова и снова каждый раз, когда обновляется состояние, и это заставляет карты каждый раз повторять рендеринг с разными номерами (тасуется)

код: 

  const icons = [1, 2, 3, 4, 1, 2, 3, 4, 5, 6, 7, 8, 5, 6, 7, 8];

  const shuffle = (cards) => {
    let counter = cards.length;

    // While there are elements in the array
    while (counter > 0) {
      // Pick a random index
      let index = Math.floor(Math.random() * counter);

      // Decrease counter by 1
      counter--;

      // And swap the last element with it
      let temp = cards[counter];
      cards[counter] = cards[index];
      cards[index] = temp;
    }

    return cards;
  }

  const shuffledCards = shuffle(icons);

  const [cards, setCards] = useState([]);
  const [isCorrect, checkCorrect] = useState(false)

  const addCard = (card) => {
    if (cards.length < 2) {
      setCards([...cards, card]);
    }

    if(cards.length === 2) {
      compareCards(cards);
      setCards([]);
     }
  }

  const compareCards = (cards) => {
    if(cards[0] === cards[1] ) {
      checkCorrect(true);
    }
  } 

   return (
    <div className="App">
      <Game shuffledCards={shuffledCards} addCard={addCard} />
    </div>
  );
}

const Game = (props) => {

    const { shuffledCards, addCard } = props;

    return (
        <div className="game">
            <div className="deck">
                {
                    shuffledCards.map((c, i) => {
                        return (
                            <div className="card" key={i} onClick={() => addCard(c)}>{c}</div>
                        );
                    })
                }
            </div>

        </div>
    )
}


export default App;

1 Ответ

1 голос
/ 14 апреля 2020

Вы можете использовать useEffect: 

const [cards, setCards] = useState([]);
useEffect(()=>{shuffle()},[cards])
...