React Native Как установить состояние - PullRequest
Новая
       17

React Native Как установить состояние

0 голосов
/ 29 апреля 2020

Я прохожу курс по мобильному приложению CS50 для EdX и создаю простое приложение для палача, чтобы убедиться, что я понимаю концепции. Ниже приведен код, который я написал. Проблема, с которой я сталкиваюсь, заключается в том, что приложение не обновляет «скрытые слова» на дисплее после каждого предположения. Я полагаю, что это потому, что произошла ошибка с настройкой функции class / 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
  }


})

1 Ответ

0 голосов
/ 29 апреля 2020

Вам не нужно let that = this

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

Просто используйте вот так. 

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

И рендер должен вернуть hiddenWord, используя this.state.hiddenWord

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

Попробуй

...