Javascript 为什么在fetch prmise和this.setState之后会打印控制台日志？单击该按钮时，该状态恰好正确

我有一个可触摸的不透明区域，里面有一个图像。我想在用户单击图像时，将touchablepacity的deopacity设置为0.2，然后执行一个fetch，结果是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>
);
}
}

import React，{Component}来自'React'；
从“react native”导入{图像、TouchableOpacity、视图、文本、样式表、状态栏}；
从“/Estilos”导入样式；
导出默认类LightsContainer扩展组件{
构造函数（）{
超级（）；
this.state={opacity:0.9}；
}
onPress=（）=>{
取回（“http://192.168.0.161/switch.php?port=1")
.then（response=>response.text（））
。然后（（dataStr）=>{
console.log（dataStr）；
如果（dataStr==1）{
this.setState（{opacity:0.9}）；
控制台日志（“si”）；
}否则{
this.setState（{opacity:0.2}）；
控制台日志（“否”）；
}
});     
console.log（this.state）；
}
render（）{
返回(
);
}
}

由于JavaScript是一种同步语言，控制台日志几乎会立即出现

在返回提取之前（数据仍在传入时），

console.log（this.state）

将已经发生，因此

onPress

的最后一行将记录初始状态。请记住，

si

和

no

的日志可能不会在

setState

完成后出现

为了纠正这一点，您可能希望通过等待承诺得到解决，来研究如何让异步代码“同步”运行