Question

我正在EdX上进行CS50移动应用程序课程，并构建一个简单的子手应用程序以确保我理解这些概念。以下是我编写的代码。我遇到的问题是，每次猜测后，应用程序都不会更新显示屏上的“ HiddenWord”。我相信这是因为设置类/ setState函数的方式存在错误，但是我似乎无法弄清楚如何正确地进行操作。当用户开始新游戏时，游戏单词将设置为“古生物学”（作为测试，最终它可能是多人游戏或从大量单词中随机选择）。猜字母时，游戏单词的“警报”显示为空白，因此我知道由于某些原因，在按下“新游戏”时状态不会更新。

感谢您的帮助。

import React from 'react';
import {View, TouchableOpacity, Text, ScrollView, StyleSheet, Switch, TextInput, FlatList} from 'react-native'
import {Constants} from 'expo'


let wins = 0
let losses=0
let word=""
let wrongletters=[]
let lengthofword=0
let testcounter=0
let isright=true
let rightcount=0
let wrongcount=0
let youwon=false
let youlost=false
let gameWord=""
let hiddenWord=""

export default class Hangman extends React.Component {
  constructor() {
    super()

    this.state = {
      gameWord: "",
      hiddenWord: ""
    }
  }

  newGame() {
      this.setState ({
      gameWord: "paleontology",
      hiddenWord: "__________"
     })

   // const text = `TODO number ${id}`
  }


  checkletter(guess) {
    alert (gameWord)
    for(let i = 0; i < gameWord.length; i++){
      if (gameWord[i] === guess) {
           hiddenWord[i] = guess;
        rightcount=rightcount+1;

          }
      else {
        testcounter=testcounter+1;
        if(testcounter===gameWord.length){
            wrongletters= {wrongletters, guess};
              wrongcount=wrongcount+1;
        }
      }
     if(gameWord===hiddenWord){
    youwon=true;
    }
     if(wrongcount===6){
    youlost=true;

    }
this.setState({hiddenWord:hiddenWord})
  }

  }
  componentDidMount() {
    let that = this
    let items = ["A", "B", "C", "D", "E", "F", "G","H","I","J", "K", "L", "M", "N", "O", "P","Q", "R", "S", "T", "U","V","W","X", "Y", "Z"]
    that.setState({
      dataSource: items,
    });
  }
  render() {
    return (

      <View style={[styles.appContainer, styles.fill]}>
        <Text style={styles.title}>
        Hang With Friends-Single Player Mode</Text>

     <TouchableOpacity style={styles.buttonTemp} onPress={() => this.newGame()}>
        <Text style={styles.buttonText}>New Game</Text>
      </TouchableOpacity>
<Text> </Text>

    <FlatList style ={styles.letterGrid}
          data={this.state.dataSource}
          renderItem={({ item }) => (
             <TouchableOpacity style={styles.letterButtons} onPress={() => this.checkletter(item)}>
      <Text style={styles.buttonText}>{item}</Text>
      </TouchableOpacity>
          )}
          //Setting the number of column
          numColumns={13}

        />


<Text style={styles.wordtoGuess}>
    {hiddenWord}</Text>
     <Text>Wrong Guesses so Far: {wrongletters}</Text>
</View>

    );
  }
}



const styles = StyleSheet.create({
  wordtoGuess: {
    fontWeight: "bold",
    marginVertical: 25,
    color: "blue",
    fontSize: 25,
    textAlign: "center",
    textDecorationLine: "underline",
    letterSpacing: 10,
    textDecorationColor: "black",
  },
  appContainer: {
    paddingTop: 50,
    backgroundColor: "white",
  },
  title: {
    fontWeight: "bold",
    marginVertical: 59,
    color: "red",
    fontSize: 30,
    textAlign: "center",
    textShadowColor: "black",
    textShadowRadius: 2,
    fontFamily: ""
  },
  buttonTemp: {
   alignItems: "center",
    backgroundColor: "blue",
    marginHorizontal: 40,
    borderRadius:23,
    padding: 10
  },
  buttonText:{
    color: "white",
    fontWeight: "bold"
  },
  letterButtons: {
    alignItems: "center",
    backgroundColor: "red",
    marginHorizontal: 0,
    borderRadius:0,
    padding: 6
  },
  letterGrid:{
paddingTop: 10,
    backgroundColor: "white",
    alignItems:"center",
    marginHorizontal:20
  }


})

Answer 1

您不必let that = this

that.setState({  //???
      dataSource: items,
    });

就是这样使用。

this.setState({  //this 
      dataSource: items,
    });

渲染器应使用this.state.hiddenWord

返回hiddenWord

<Text style={styles.wordtoGuess}>{this.state.hiddenWord}</Text>

尝试一下

React Native如何设置状态

1 个答案: