Question

我正在做一个记忆游戏，当两个图块不匹配时，在维护逻辑方面存在一些大问题。如果我们可以有条件地使用钩子，我可能会知道该怎么做。我的代码如下：

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（如果图标不匹配）（在其他表达式中当然是错误的，只是一个占位符）。但是根据挂钩规则，我无法做到这一点。实际上，我认为我什至不应该在事件处理程序中设置状态。有人可以建议我解决这种限制的方法吗？也许还有其他逻辑，这些逻辑将有助于我在该项目中解决问题？预先谢谢你

在记忆游戏中有条件设置状态挂钩的问题

0 个答案: