Проблема с условной установкой состояния в Memory Game - PullRequest
Новая
       3

Проблема с условной установкой состояния в Memory Game

0 голосов
/ 02 мая 2019

Я работаю над игрой в память и у меня большие проблемы с поддержкой логики, когда две плитки не совпадают. Я бы, наверное, знал, как это сделать, если бы мы могли использовать крючки условно. Мой код выглядит так: 

var choiceArray = [];
const Board = () => {
  const [isHidden, setIsHidden] = useState(Array(12).fill(false));

  const handleClick = index => {
    setIsHidden(
      isHidden.map((hidden, hiddenIndex) =>
        index === hiddenIndex ? !hidden : hidden
      )
    );

    choiceArray.push(index);
    console.log(choiceArray);

    if (choiceArray.length === 2) {
      if (animalArray[choiceArray[0]] === animalArray[choiceArray[1]]) {
        console.log("dupa");
        choiceArray = [];
      } else {
        setIsHidden(
          isHidden.map((hidden, hiddenIndex) =>
            index === hiddenIndex ? !hidden : hidden
          )
        );
      }
      choiceArray = [];
    }
  };

  const renderButton = index => {
    return (
      <Button
        icon={animalArray[index]}
        isHidden={isHidden[index]}
        onClick={() => handleClick(index)}
      />
    );
  };

Я объявил массив выбора глобально, чтобы избежать проблем с предыдущим / текущим состоянием. (Я не знаю, если это хорошая практика, хотя) В любом случае, я хотел установить значение isHidden для логических значений обеих плиток равным false, если значки не совпадают (выражение внутри else, конечно, неверно, просто заполнитель). Но в соответствии с Правилами Крюков я не могу этого сделать. На самом деле, я думаю, что я даже не должен устанавливать состояние внутри обработчика событий. Может ли кто-нибудь предложить мне способ обойти это ограничение? Или, может быть, какая-то другая логика, которая поможет мне разобраться в этом проекте? Заранее спасибо

...