Question

我对本机反应还很陌生，并尝试按照LifeRPG应用程序（游戏化的待办事项列表）开发一个简单的移动应用程序。

应用程序启动时，应检查character.json文件是否存在，并根据结果显示特定的视图。但是，当我执行此操作时，在放置视图以检查文件是否存在之后，放入视图的列表为空。

import React, {Component} from 'react'
import {View,Text,Image,Button} from 'react-native'
import styles from "./styles"
import { Provider as PaperProvider } from 'react-native-paper';
import RNFetchBlob from 'react-native-fetch-blob'

class CharacterSelect extends Component{

static navigationOptions = {
    header: null
}

constructor() {
    super()
}


render() {

    let displayView=[]
    RNFetchBlob.fs.exists("@assets/character.json")
        .then((exists) => {
            if (exists){
                console.warn("if")
            } else {
                console.log(displayView);
                displayView.push(<View style={styles.viewCharacter}><Text>Oopsie, no character!</Text><Button title="press" onPress={()=>this.checkCharacterExists()}></Button></View>)
                console.log(displayView);
            }
        })

    console.log(displayView)



    const {} = styles
    return(
        <PaperProvider>
        <View style={styles.viewTitle}>
                <Text style={styles.textStyle}>Welcome to RpgDoIt!</Text>
                <Image style={styles.image} source={require('@assets/titlelogo.png')}/>
        </View>



        {displayView}

        </PaperProvider>
    )
}
}

export default CharacterSelect

它应该产生一个在else块中显示的View，但是什么也没有发生，当数组在上一个代码块之外命中console.log时，该数组为空。

Answer 1

您的数组在控制台日志中为空，因为您异步推送到该数组。

let displayView=[]
    RNFetchBlob.fs.exists("@assets/character.json")
        .then((exists) => {
             // EVERYTHING here happens asynchronously. I.e., it is likely (but not necessarily) executed after the console log.
        })

    console.log(displayView)

如果您希望在推送后控制台日志，则可以：1）将console.log移到then内；或2）使用await关键字并标记为async。

了解更多信息，了解异步代码（不一定是JS特定的，但通常来说）。

推送到列表后为空（变量范围不正确？）

1 个答案: