Почему консольные журналы печатаются после получения prmise и this.setState как раз, когда я нажимаю кнопку

Question

У меня есть область touchableOpacity с изображением внутри. Я хочу сделать, когда пользователь щелкает изображение, установите непрозрачность touchableOpacity равным 0,2, а затем выполните выборку, которая в результате получит 0 или 1. Если 0, измените изображение на черно-белое, в противном случае - цветное изображение. Но я не могу зайти так далеко. Не удается найти причину, по которой, когда я щелкаю область touchableOpacity, console.log печатает в консоли его значение, но не устанавливает state.opacity.

import React, { Component } from 'react';
import {Image, TouchableOpacity, View, Text, StyleSheet, StatusBar } from 'react-native';
import styles from './Estilos';

export default class LightsContainer extends Component {
constructor() {
super();

  this.state = { opacity: 0.9 };
}

onPress = () => {

    fetch("http://192.168.0.161/switch.php?port=1")
        .then(response => response.text()) 
        .then((dataStr) => {

        console.log(dataStr);     

        if (dataStr == 1){

            this.setState({opacity: 0.9});
            console.log("si");

        } else {

            this.setState({opacity: 0.2});
            console.log("no");

        }
    });     

    console.log(this.state);
}

render() {
return (
 <View style={{flex: 1}}>
  <View style={{flex: 1, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}}  >
        <TouchableOpacity style={{opacity: this.state.opacity}} onPress={this.onPress.bind(this)} >
            <Image source={require('./bulb-512.png')}  style={{width: 150, height: 150, top:-40}} />
      </TouchableOpacity>
        <TouchableOpacity style={styles.button}  >
            <Image source={require('./bulb-512.png')}  style={{width: 150, height: 150, top:-10}} />
      </TouchableOpacity>
        <TouchableOpacity style={styles.button}  >
            <Image source={require('./bulb-512.png')}  style={{width: 150, height: 150, top:20}} />
      </TouchableOpacity>
    </View>
</View>
);
}
}

Answer 1

Журнал консоли будет происходить почти сразу, поскольку JavaScript является синхронным языком.

До того, как извлечение будет возвращено (пока данные все еще поступают), console.log(this.state) уже произойдет, поэтому последняя строка onPress будет записывать начальное состояние.Помните также, что сам метод setState React является асинхронным! , поэтому журналы для si и no могут не появиться после завершения setState.

Чтобы исправить этовы можете захотеть изучить синтаксис async / await , который позволит асинхронному коду запускаться «синхронно», ожидая разрешения Promises