Reactjs 推送用户表单数据并将其保存到实时firebase数据库-React

我有一个表单，用户可以在其中向数据库添加一个操作，也可以编辑该操作。我可以在firebase数据库中看到新数据（和编辑的数据）。但当我刷新React应用程序时，它会删除用户存储在数据库中的任何内容

我已经阅读了有关保存数据的firebase文档。我读到的大多数地方，它们似乎都在为数据库“设置”硬数据。因为我需要用户数据

const updatedActions = [];
        database.ref('actions').on('value', (snapshot) => {
            console.log(typeof snapshot, '<-- snapshot type')

            snapshot.forEach((childSnapShot) => {
                updatedActions.push({
                    key: childSnapShot.key,
                    ...childSnapShot.val()
                })
            })
        })
        console.log(updatedActions, '<-- updatedActions')
        this.props.fetchingAction(updatedActions)
    }

    submitAddActions = (e) => {
        e.preventDefault();
        console.log( this.state.addAction, '<-- new actions')

        const newAction = database.ref('actions').push({
            action: this.state.addAction
        })
        console.log(newAction.key, '<-- newAction')
        this.setState({
            actionKey: newAction.key
        }, () => {
            console.log(this.state, '<-- this is the full state')
        })
    }

    handleChange = (e) => {
        this.setState({
            addAction: e.target.value
        }, () => {
                console.log(this.state.addAction, 'added action in state')

        })
    }
    actionAdd = (e) => {
        e.preventDefault();
        this.setState({
            actionAdd: !this.state.actionAdd
        })
    }
    triggerEditForm = (e) => {
        e.preventDefault()
        this.setState({
            canEditAction: false
        })
    }
    handleEdit = (e) => {
        this.setState({
            editedAction: e.target.value
        })
    }
    submitEditAction = (e) => {
        e.preventDefault();
        console.log( this.state.editedAction, '<-- edited action in db')
        database.ref('actions/' + this.state.actionKey).update({
            action: this.state.editedAction
        })
    }




    render(){

        return(
            <div>
            {this.state.actionAdd ?
                <button className="addAction" onClick={this.actionAdd}>Add Action</button>
                      :
                <form onSubmit={this.submitAddActions} id="addActions">
                    <input type="text" placeholder="Add an action" name="addAction" onChange={this.handleChange}/>
                    <button className="addAction" type="submit">Add Action</button>
                </form>
            }

                {this.state.canEditAction ?
                    <button className="addAction" onClick={this.triggerEditForm}>Edit Action</button>
                    :
                    <form onSubmit={this.submitEditAction}>
                    <input type="text" onChange={this.handleEdit} value={this.state.editedAction} />
                    <button type="submit" className="addAction">Submit</button>
                    </form>
                }

            </div>
            )
    }
}

const updateActions=[]；
database.ref（'actions'）。on（'value'，（快照）=>{
console.log（快照类型，'