为什么当我单击按钮后，在获取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解决来让您的异步代码“同步”运行。