处理从异步运行的Firebase中获取数据的重装数据的正确方法是什么？

Question

我正在构建一个本机应用程序，用户可以在其中创建房间。

用户填写一个具有新房间名称的表格，当他们按下提交按钮时，将触发一个thunk，以检查我的Firebase数据库中是否已经存在使用该名称的房间。如果房间已经存在，则我组件中的方法会在本地状态下设置错误。

我的问题是，在thunk完成运行之前，正在检查正在检查是否存在错误的逻辑，无论该逻辑如何都将重新路由到会议室页面。

我尝试使Create Room函数异步并等待重击，但这没有用。有没有一种方法可以阻止其他功能在完成转换之前运行？

//thunk

export const createRoom = (newRoom = {}, errorFn, clearErrorFn) => {
  console.log('creating room thunk')
  return (dispatch, getState) => {
   const room = {
    name: newRoom.name,
    prompt: newRoom.prompt,
    owner: newRoom.owner,
    people: newRoom.owner,
    ideas: "ideas"
 }

//checking whether the room exists
database.ref('rooms').once('value', (snapshot) => {
  const rooms = [];
  snapshot.forEach((childSnapshot) => {
    rooms.push(childSnapshot.val().name)
  })
  if (!rooms.includes(room.name)) {
    database.ref(`rooms/${room.name}`).set(room).then(() => {
      database.ref(`rooms/${room.name}/prompt`).set(room.prompt).then(() => {
        database.ref(`rooms/${room.name}/owner`).set(room.owner).then(() => {
          database.ref(`rooms/${room.name}/people/${room.people}`).set(room.people).then(() => {
            database.ref(`rooms/${room.name}/ideas/`).set(room.ideas)
          })
        })
      })
    })
    clearErrorFn()
    dispatch(afterRoomCreate(room))
  } else {
    console.log('Room name not available!')
    return errorFn('Room name not available!')
  }
})

} }

//component
    import React from 'react';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import { connect } from 'react-redux';
import {
    ScrollView,
    StyleSheet,
    View,
    TextInput,
    Text,
    Button,
    KeyboardAvoidingView
} from 'react-native';

import { createRoom, joinRoom } from '../redux/reducers/rooms/actions'

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Undecided!',
    };
    constructor(props) {
        super(props)
        this.state = {
            createRoomName: "",
            joinRoomName: '',
            newRoomPurpose: '',
            newRoomUserName: '',
            joinRoomUserName: '',
            createError: "",
            joinError: "",
            yesCreateError: false,
            hasRun: false
        }
        this.showCreateError = this.showCreateError.bind(this)
        this.showJoinError = this.showJoinError.bind(this)
        this.clearCreateError = this.clearCreateError.bind(this)
        this.handleCreateRoom = this.handleCreateRoom.bind(this)
    }

    async handleCreateRoom() {
const newRoom = {
  name: this.state.createRoomName,
  prompt: this.state.newRoomPurpose,
  owner: this.state.newRoomUserName
}

        this.props.createNewRoom(newRoom, this.showCreateError, this.clearCreateError)
        if (this.state.createError === "") {
            const { navigate } = this.props.navigation;
            navigate('Room',
                { roomName: this.state.createRoomName, owner: this.state.newRoomUserName, user: this.state.newRoomUserName, prompt: this.state.newRoomPurpose }
            )
        } else {
            this.setState({
                createError: ""
            })
        }

    }


    showCreateError = (createError) => {
        this.setState({
            createError,
            hasRun: true
        });
    }

    showJoinError = (joinError) => {
        this.setState({
            joinError,
            hasRun: true
        });
    }

    clearCreateError = () => {
        this.setState({
            createError: "",
            hasRun: true
        })
    }


    render() {
        return (
            <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <ScrollView>
                    {/* create room button */}
                    <View style={styles.sectionContainer}>
                        <View>
                            <Text style={styles.homePageHeaders}>Create a New Room</Text>
                        </View>
                        <View>
                            <TextInput
                                style={styles.homePageInputs}
                                onChangeText={(text) => this.setState({ createRoomName: text })}
                                value={this.state.createRoomName}
                                placeholder="Enter New Room Name"
                            />
                            <Text style={styles.errorText}>{this.state.createError}</Text>
                            <TextInput
                                style={styles.homePageInputs}
                                onChangeText={(text) => this.setState({ newRoomPurpose: text })}
                                value={this.state.newRoomPurpose}
                                placeholder="What is the purpose of this room?"
                            />
                            <TextInput
                                style={styles.homePageInputs}
                                onChangeText={(text) => this.setState({ newRoomUserName: text })}
                                value={this.state.newRoomUserName}
                                placeholder="What is your name?"
                            />
                        </View>
                        <View style={styles.homePageButtons}>
                            <Button
                                onPress={this.handleCreateRoom}
                                title="Create Room"
                                accessibilityLabel="Create Room"
                                color="white"
                                style={styles.homePageButtons}
                            />
                        </View>
                    </View>

                    {/* end of create room button */}

                    {/* join room input & button */}
                    <View style={styles.sectionContainer}>
                        <View>
                            <Text style={styles.homePageHeaders}>Enter Existing Room</Text>
                        </View>
                        <View>
                            <TextInput
                                style={styles.homePageInputs}
                                onChangeText={(text) => this.setState({ joinRoomName: text })}
                                value={this.state.joinRoomName}
                                placeholder="Input name of existing room"
                            />
                            <TextInput
                                style={styles.homePageInputs}
                                onChangeText={(text) => this.setState({ joinRoomUserName: text })}
                                value={this.state.joinRoomUserName}
                                placeholder="What is your name?"
                            />

                        </View>

                        <View style={styles.homePageButtons}>
                            <Button
                                onPress={this.handleCreateRoom}
                                title="Join Room"
                                accessibilityLabel="Join Room"
                                color="white"
                            />
                        </View>
                    </View>


                    {/* end of join room input & button */}
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }

}

const mapDispatchToProps = (dispatch) => ({
    createNewRoom: (room, error, clearError) => dispatch(createRoom(room, error, clearError)),
    joinRoom: (data) => dispatch(joinRoom(data, showJoinError))
})


export default connect(null, mapDispatchToProps)(HomeScreen)