Question

我的数字猜测应用程序面临一个小问题...我已经创建了一个生成随机数的函数，如果每次重新分配该数字时我都会对其进行控制台记录->它会正常显示，但是当我尝试将其输出到组件中，它仅提供默认值，并且从不更新。

这是我的代码

 const makeGuess = () => {
        guessMade = Math.floor(Math.random() * (maximum-minimum)) + minimum;
        if(guessMade == props.chosenNumber)
        {
            alert("Computer Guessed It!");
            props.close();
        }
        console.log(guessMade);
 }

和文本输出

<Text>
  {guessMade}
</Text>

完整代码：

const GuessModule = props =>{
    var minimum = 0
    var maximum = 999999
    var guessMade = 0

    const makeGuess = () => {
        guessMade = Math.floor(Math.random() * (maximum-minimum)) + minimum;
        if(guessMade == props.chosenNumber)
        {
            alert("Computer Guessed It!");
            props.close();
        }
        console.log(guessMade);
    }   

    const setSmaller = () => {
        if(guessMade < props.chosenNumber){
            minimum = guessMade + 1;
            makeGuess();
        }
        else{
            alert('CHEATER');
        }

    }

    const setBigger = () => {
        if(guessMade > props.chosenNumber){
            maximum = guessMade - 1;
            makeGuess();
        }
        else {
            alert('CHEATER');
        }
    }

    return(
        <Modal visible={props.isVisible} animated="slide" >
            <Header title="Time to play!" />
            <View style={{backgroundColor: 'orange',}}>
                <Text style={styles.upperBannerText}>
                    Your Number: {props.chosenNumber}
                </Text>
            </View>
            <View style={styles.mainView}>
                <Text style={styles.cpuText}>
                    CPU Guess: {guessMade}
                </Text>
                <Button onPress={makeGuess} title="Make A Guess"/>
                <View style={styles.buttonBox}>
                    <Button onPress={setSmaller} title="Bigger"/>
                    <Button onPress={setBigger} title="Smaller"/>
                    <Button onPress={props.close} title="Close"/> 
                </View>
            </View>
        </Modal>
    );
}

Answer 1

尝试此代码。希望对您有所帮助。

this.state = {
          guessMade: ''
        };

 const makeGuess = () => {
        guessMade = Math.floor(Math.random() * (maximum-minimum)) + minimum;
        this.setState({
            guessMade: guessMade
        });
        if(this.state.guessMade == props.chosenNumber)
        {
            alert("Computer Guessed It!");
            props.close();
        }
        console.log(this.state.guessMade);
 }  

<Text>
  {this.state.guessMade}
</Text>

Answer 2

请使用类组件代替功能组件，并且管理猜测状态

在<Text>组件中显示实时变量值-React Native

2 个答案: