“useEffect”钩子只触发一次？

我正在为“React Native”开发一个猜测游戏，用户输入一个数字，手机尝试猜测它。每次手机生成猜测时，用户都可以单击“更大/更低”。当用户输入数字并且计算机猜测彼此相等时，我们将进入游戏结束屏幕。

游戏结束画面未渲染。在屏幕上渲染游戏的逻辑位于 useEffect() 内部

Problem

useEffect 在安装阶段只触发一次，再也不会触发？

  const { userSelectedNumber, onGameOver } = props;
  useEffect(() => {
    console.log(currentGuess, userSelectedNumber);
    if (currentGuess === userSelectedNumber) {
      onGameOver(rounds);
    }
  }, [userSelectedNumber, onGameOver]);*emphasized text*

(./screens/GameScreen.js)

我们应该退出游戏屏幕currentGuess === userSelectedNumber但这段代码只运行一次。

GameScreen 的完整代码如下：

import React, { useState, useRef, useEffect } from "react";
import { View, StyleSheet, Button, Text, Alert } from "react-native";

import NumberContainer from "../components/NumberContainer";
import Card from "../components/Card";

const randNumberGeneratorBetween = (min, max, exclude) => {
  min = Math.ceil(min);
  max = Math.floor(max);

  const randNum = Math.floor(Math.random() * (max - min)) + min;


  if (randNum === exclude) {
    return randNumberGeneratorBetween(1, 100, exclude);
  } else {
    return randNum;
  }
};

const GameScreen = props => {
  const [currentGuess, setCurrentGuess] = useState(
    randNumberGeneratorBetween(1, 100, props.userSelectedNumber)
  );
  const [rounds, setRounds] = useState(0);

  const currentLow = useRef(1);
  const currentHigh = useRef(100);

  const { userSelectedNumber, onGameOver } = props;

  useEffect(() => {
    console.log(currentGuess, userSelectedNumber);
    if (currentGuess === userSelectedNumber) {
      onGameOver(rounds);
    }
  }, [userSelectedNumber, onGameOver]);

  const nextGuessHandler = direction => {
    if (
      (direction === "lower" && currentGuess < props.userSelectedNumber) ||
      (direction === "greater" && currentGuess > props.userSelectedNumber)
    ) {
      Alert.alert("Don't Lie", "You know this is wrong", [
        { text: "Sorry", style: "cancel" }
      ]);
    }

    if (direction === "lower") {
      currentHigh.current = currentGuess;
    } else {
      currentLow.current = currentGuess;
    }
    const nextNumber = randNumberGeneratorBetween(
      currentLow.current,
      currentHigh.current,
      currentGuess
    );
    console.log('nextNumber',nextNumber);
    setCurrentGuess(nextNumber);

    setRounds(currRounds => currRounds + 1);
    console.log('currRound',rounds);

  };

  return (
    <View style={styles.screen}>
      <Text>Opponents Guess</Text>
      <NumberContainer>{currentGuess}</NumberContainer>
      <Card style={styles.buttonContainer}>
        <Button
          title="Lower"
          onPress={nextGuessHandler.bind(this, "lower")}
        ></Button>
        <Button
          title="Greater"
          onPress={nextGuessHandler.bind(this, "greater")}
        ></Button>
      </Card>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 10,
    alignItems: "center"
  },
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 20,
    width: 300,
    maxWidth: "80%"
  }
});

export default GameScreen;

项目可以在这里找到：https://codesandbox.io/s/github/SMasood1/guessingGame?file=/screens/GameScreen.js:852-1039 https://codesandbox.io/s/github/SMasood1/guessingGame?file=/screens/GameScreen.js:852-1039

你需要添加rounds and currentGuess到 useEffect 挂钩中的依赖项数组

 useEffect(() => {
    console.log(currentGuess, userSelectedNumber);
    if (currentGuess === userSelectedNumber) {
      onGameOver(rounds);
    }
  }, [userSelectedNumber, onGameOver,currentGuess,rounds]);

此外，使用 props 初始化状态也被认为是一种反模式，因此我建议添加另一个 useEffect 钩子：

useEffect(()=>{
    setCurrentGuess(randNumberGeneratorBetween(1, 100, props.userSelectedNumber))

},[props.userSelectedNumber]);