为什么当我单击按钮后，在获取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);});}}

Answer 1

由于JavaScript是一种同步语言，因此控制台日志几乎都会立即发生。

在返回提取之前（数据仍在传入时），该操作console.log(this.state)已经发生，因此的最后一行onPress将记录初始状态。同样要记住，React的setState方法本身是异步的！，所以日志si和no后可能不会发生setState已完成。

为了解决这个问题，您可能需要研究async / await语法，该语法将通过等待Promises解决来让您的异步代码“同步”运行。