Firebase数据库更新相同的值

时间:2019-03-20 01:50:46

标签: javascript reactjs firebase firebase-realtime-database

我是数据库和Firebase的新手,我一直在更新firebase数据库。但是,当我更新Firebase时,它只会更新第一个值,而不会更改其他值。

这是editMenu的一部分,可从其中显示菜单,并可以选择编辑和删除菜单。

text

和menuEditform组件,该组件具有用于编辑Menu的表单

contentMenuKeys.map(t=>{
              // if (t === this.state.Appetizer)

              return(
                <div className="text-center">
                  <h4>{t}</h4>

                  <div className="row">
                    {Object.keys(this.props.menu[t]).map(menu=>{
                      return(

                      [this.props.menu[t][menu]].map(item=>{
                        return(
                          <div className="col-md-6 menuItems" >
                            <div className="textM d-flex">
                              <div className="one-half">
                                <h3>{item.Name}</h3>
                                <p><span>{item.Description}</span></p>

                              </div>
                              <div className="one-forth">
                                <span className="price">${item.Price}</span>
                                <p><span>
                                  <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#MenuEditModal">Edit</button ><MenuEditForm Menu_Type={t} Name={item.Name}Description={item.Description}  Price={item.Price}iID={menu} rID={queryString.parse(this.props.location.search).id }/>{"   "}
                                  <button  type="submit" onClick={()=>{this.props.deleteMenu({rID:queryString.parse(this.props.location.search).id,Menu_Type:t,iID:menu})}} className="btn btn-danger ml-2">Remove</button>
                                </span></p>
                              </div>
                            </div>
                          </div>
                        )

这是editMenu函数

import React,{Component} from 'react'
import {connect} from "react-redux"
import propTypes from "prop-types"
import { editMenu } from "../../actions/addMenu"



export class MenuEditForm extends Component {
    state={
        Name:"",
        Description: "",
        Price:"",
        Menu_Type:"",
        rID:""
    }

    static propTypes={
        editMenu: propTypes.func.isRequired

    }


    onChange=e=> this.setState({[e.target.name]:e.target.value});


    onSubmit=e=>{

        e.preventDefault();

        const { Name, Description, Price, rID, Menu_Type } = this.state;
        const menu = { Name, Description, Price, Menu_Type, rID, iID:this.props.iID };

        this.props.editMenu(menu);
        this.setState({
            Name:"",
            Description: "",
            Price:"",
            Menu_Type:"",
        });

    }
    componentDidMount(){
        this.setState({rID:this.props.rID,iID:this.props.iID,Menu_Type:this.props.Menu_Type})
      }


    render(){
        const {Name, Description, Price, Menu_Type}=this.state;

这是firebase的一部分

export const editMenu =(item) =>(dispatch)=>{
    axios
        .post("/api/database/editMenu", item)
        .then(res => {
            dispatch({
                type:EDIT_MENU,
                payload:res.data

            });
        })
        .catch(err=>
            dispatch(returnErrors(err.response.date,err.response.status)));


};

0 个答案:

没有答案