Question

我正在使用React和Node构建基于Web的界面来修改Firebase数据库中的数据。我以前在此应用程序中使用Firebase Web SDK从数据库加载数据，但我遇到了一个保存用户更改的奇怪问题。当我在数据库引用（即set）上调用firebase.database().ref('/path/to/object').set({abc: 'xyz'})时，网页会挂起。奇怪的是，更改会保存到数据库中，但永远不会调用then指定的回调（取决于浏览器，会显示This page is slowing down your browser消息）。我确定该问题与set有关，因为删除该呼叫会导致挂起（请参阅下面的代码中的save()）。

import React from 'react'
import * as firebase from 'firebase'
// additional (unrelated) imports

export default class Editor extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            savingModal: false,
            errorModal: false,
            cancelModal: false,
            errors: []
        }
    }

    save() {
        // this.form is a Reactstrap Form
        // validate is a function that returns an array of strings
        var errors;
        // validate the form, show the errors if any
        if ((errors = this.form.validate()) && errors.length > 0)
            this.setState({errorModal: true, errors: errors})
        else {
            // collect is a function that returns an object with the data that the user entered
            var x = this.form.collect()
            // getEditorInfo is a function that returns info such as the type of object being edited
            var info = this.getEditorInfo()
            firebase.database().ref(`/${info.category}/${x.id}/`).set(x).then(() => {
                this.closeEditor()
            }, e => {
                alert(`An unexpected error occurred:\n${e}`)
            })
            this.setState({savingModal: true})
        }
    }

    // closes the window or redirects to /
    closeEditor() {
        if (window.opener) 
            window.close()
        else 
            window.location.href = '/'
    }

    render() {
        // BasicModal is a custom component that renders a Reactstrap Modal
        // IndeterminateModal is a custom component that renders a Reactstrap Modal with only a Progress element
        // EditorToolbar and EditorForm are custom components that render the UI of the page (I don't think they're relevant to the issue)
        var info = this.getEditorInfo()
        if (!info) 
            return <BasicModal isOpen={true} onPrimary={this.closeEditor} primary="Close" header="Invalid Request" body="ERROR: The request is invalid."/>
        else
            return <div>
                <EditorToolbar onSave={this.save.bind(this)} onCancel={() => this.setState({cancelModal: true})}/>
                <EditorForm ref={f => this.form = f}/>
                <BasicModal toggle={() => this.setState({cancelModal: !this.state.cancelModal})} isOpen={this.state.cancelModal} header="Unsaved Changes" body={<p>If you close this window, your changes will not be saved.<br/>Are you sure you want to continue?</p>} primary="Close Anyway" primaryColor="danger" secondary="Go Back" onPrimary={this.closeEditor}/>
                <IndeterminateModal style={{
                                top: '50%',
                                transform: 'translateY(-50%)'
                }} isOpen={this.state.savingModal} progressColor="primary" progressText="Processing..."/>
                <BasicModal toggle={() => this.setState({errorModal: false, errors: []})} isOpen={this.state.errorModal} header="Validation Error" body={<div><p>Please resolve the following errors:<br/></p><ul>{(this.state.errors || []).map(e => <li key={e}>{e}</li>)}</ul></div>} primary="Dismiss" primaryColor="primary"/>
            </div>
    }
}

Answer 1

更新1/8/2018

我今天遇到了this article，我决定尝试一种涉及JavaScript PGPKey方法的新解决方案。在我的情况下，在我的应用中调用setTimeout然后调用this.setState后发生了冻结。我怀疑冻结问题是由此引起的。我猜JavaScript无法同时处理状态更改和Firebase操作。 这个新解决方案功能齐全，更安全，更快速，更简单。看一看：

firebase.database().ref(path).set(data)

旧解决方案

~~我最终找到了解决方案。我确信它可以改进，但它确实有用。~~我使用Web Workers API来运行我的Firebase代码。

在// to perform your desired Firebase operation: var timeout = 50 // give JS some time (e.g. 50ms) to finish other operations first setTimeout(() => firebase.database().ref(path).set(data).then( () => {/* ... */}, error => {/* ... */}), timeout)文件夹（Node.js）
下载Firebase Web SDK源代码的副本并将其放在public
我选择使用public

Worker

postMessage

FirebaseWorker.js

self.onmessage = event => {
    importScripts('./firebase.js') // import the local Firebase script
    firebase.initializeApp({/* your config */})
    const promise = p => p.then(
        () => self.postMessage({error: null}),
         e => self.postMessage({error: e})
    const doWork = () => {
        switch (event.data.action) {
            case 'get':
                promise(firebase.database().ref(event.data.path).once('value'))
                break;
            case 'set':
                promise(firebase.database().ref(event.data.path).set(event.data.data))
                break;
            case 'update':
                promise(firebase.database().ref(event.data.path).update(event.data.data))
                break;
            case 'remove':
                promise(firebase.database().ref(event.data.path).remove())
                break;
        }
    }
    if (!firebase.auth().currentUser)
        firebase.auth().signInWithEmailAndPassword(event.data.email, event.data.password).then(() => doWork())
    else
        doWork()
}

在Firebase数据库引用上调用Set会导致网页挂起

1 个答案: