React Native - состояние не изменится

Question

Я работаю над своим первым небольшим игровым приложением.

Что я хочу сделать, это передать логический GreenF компоненту Green. (этот компонент представляет собой зеленую кнопку, которая проверяет, является ли greenFla sh истиной, затем меняет цвет кнопки - работает нормально).

Но состояние greenF не изменится с ложного на истинное, тогда Зеленый компонент не изменился. Мне нужно, чтобы GreenF менялся всякий раз, когда мне нужно в функции play ();

Сейчас greenF не определен, когда я передаю его. Я не уверен, что что-то упустил или у меня проблемы с пониманием состояния React.

Это только начало моего кода, поэтому ничего не заполнено, но только для вашего понимания.

import React, {Component} from 'react';
import {StyleSheet, Text, View,TouchableOpacity, Button} from 'react-native';
import Green from './components/Green.js'

export default class App extends Component{
  constructor (props){
    super(props);
    this.state = {
      greenF: false
    }
  }

  render() {
    let score; // user score
    let seq=[];//order of playing colors
    let playerSeq=[]; //order of user pressing the colors
    let round; // round number
    let ok; //does the user pressed right
    let win;
    let compTurn;
    let greenF;    
    /* 
    for (var i=0; i<5; i++) {
      seq.push(Math.floor(Math.random()*4)+1);
    }
    */

    function play() {
      seq=[1,2,3,1,4]; //just for test
      compTurn=true;
      round=1;
      for (var i=0; i<round ; i++){
        switch (i) {
          case 1:
            this.setState({ greenF: true })
            break;
          case 2:
            //tbchanged
            break;
          case 3:
            //tbchanged
            break;
          case 4:
            //tbchanged
            break;
        }
        compTurn=false;
      }
    }

    return (
      <View>
        <Button 
        title='start' 
        color='black' 
        onPress={() => {
          play();
         }}>

        </Button>
        <Green greenFlash={greenF}> </Green>  //GREENF IS UNDEFINED
      </View>
    );
  }
}

Answer 1

Вы должны взять его из состояния, иначе оно действительно не определено:

<Green greenFlash={this.state.greenF} />

Из документов React:

В дополнение к получению входных данных (доступных через this.props ) компонент может поддерживать данные внутреннего состояния (доступ к которым осуществляется через this.state). Когда данные состояния компонента изменяются, визуализированная разметка будет обновлена ​​повторным вызовом render ().

Это означает, что метод play () и переменные stati c вы пытаетесь изменить на самом деле неправильно используются / определены. Все, что вам нужно сделать, это всегда использовать состояние для запуска повторного рендеринга компонента:

export default class App extends Component{
  constructor (props){
    super(props);
    this.state = {
      greenF: false,
      score: 0,
      seq: [1,2,3,1,4],
      playerSeq: [],
      round: 1,
    }
  }

  play()
  {
     // I don't know exactly what you want to achieve here, but the idea
     // was to move the play method outside the render method

      seq=[1,2,3,1,4]; //just for test
      compTurn=true;
      round=1;
      for (var i=0; i<round ; i++){
        switch (i) {
          case 1:
            this.setState({ greenF: true })
            break;
          case 2:
            //tbchanged
            break;
          case 3:
            //tbchanged
            break;
          case 4:
            //tbchanged
            break;
        }
        compTurn=false;
      }
    }


  render()
 {
    return (
      <View>
        <Button 
        title='start' 
        color='black' 
        onPress={this.play}>

        </Button>
        <Green greenFlash={this.state.greenF}> </Green>
      </View>
    );
  }
}