对 useEffect 的用户定义函数调用不返回正确的输出

Question

我正在 React JS 中构建一个井字游戏应用程序，但 useEffect 在 React 中的表现对我来说非常奇怪。这是完整的项目 url：https://github.com/vyshnav4u/react-tic-tac-toe

代码段有问题

你可以看到我在useEffect中调用了isWinner函数，在满足获胜条件的情况下，isWinner应该打印"finish" 在控制台上并且 return 为真。现在它在控制台上正确打印“完成”但不是 return 或在 useEffect.

中打印 true

useEffect(() => {
    if (currentSquare >= 0) {
      let winFlag = isWinner(currentSquare);

      // this should print true when winning condition is meet,
      // but it's always printing false
      console.log(winFlag);
      if (winFlag) {
        alert("won");
      }
    }
  }, [currentSquare, value]);

//isWinner function
const isWinner = (currentIndex) => {
    pattern.forEach((singlePattern, index) => {
      if (singlePattern.includes(currentIndex)) {
        let tempIndex_0 = singlePattern[0];
        let tempIndex_1 = singlePattern[1];
        let tempIndex_2 = singlePattern[2];

        if (
          value[tempIndex_0] == value[tempIndex_1] &&
          value[tempIndex_1] == value[tempIndex_2]
        ) {
          console.log("finish");
          return true;
        }
      }
    });
    return false;
  };

编辑： 问题已解决，不是由 useEffect 引起的问题，而是在 isWinner 函数中错误使用 forEach，请参阅经过验证的答案。

Answer 1

您似乎在 returnforEach 的回调中。循环将中断。但是，您仍然会转到 isWinner 函数中的下一行并且 return false.

在 return false; 前面加上 console.log 会显示这个。

Answer 2

Array.prototype.forEach 是空的 return。 return true 不是 isWinner 回调的 return，它只是 .forEach 回调的 return。

如果我理解 isWinner 函数的用途，您想要 return true|false 是否满足获胜条件。

您可以将 isWon 变量初始化为 false，并且仅在条件时设置为 true。

const isWinner = (currentIndex) => {
  let isWon = false;

  pattern.forEach((singlePattern, index) => {
    if (singlePattern.includes(currentIndex)) {
      const tempIndex_0 = singlePattern[0];
      const tempIndex_1 = singlePattern[1];
      const tempIndex_2 = singlePattern[2];

      if (
        value[tempIndex_0] == value[tempIndex_1] &&
        value[tempIndex_1] == value[tempIndex_2]
      ) {
        console.log("finish");
        isWon = true;
      }
    }
  });
  return isWon;
};

或者重构代码使其更具功能性。

const isWinner = (currentIndex) => {
  return pattern.some((singlePattern, index) => {
    if (singlePattern.includes(currentIndex)) {
      const [tempIndex_0, tempIndex_1, tempIndex_2] = singlePattern;

      if (
        value[tempIndex_0] == value[tempIndex_1] &&
        value[tempIndex_1] == value[tempIndex_2]
      ) {
        console.log("finish");
        return true;
      }
    }
    return false;
  });
};

对 useEffect 的用户定义函数调用不返回正确的输出

User defined function call on useEffect not rerturing correct output

tic-tac-toe

reactjs

react-hooks

use-effect

use-state