我已经在Firebase的数据库中添加了一个菜单，现在我想在数据库中编辑菜单。但是，每当我发送更新菜单的请求时，它只会更新第一个菜单。无论我选择哪个菜单，它始终会更新数据库中的第一个菜单。
这是我的editMenu组件的一部分，该组件具有一个链接到EditmenuForm的按钮。
`
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>
)
})
)
})
}`
下面是具有编辑菜单形式的MenuEditForm组件。
`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=>{
console.log("reached");
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})
}
render(){const {Name, Description, Price, Menu_Type}=this.state;
return(
<div>
<form onSubmit={this.onSubmit}>
<div className="modal fade" id="MenuEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">Edit Items</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div>
<div className="modal-body">
<div className="ml-4 mr-4 mt-4 mb-4">
<div className="form-group">
<label>Menu_Type</label>
<select name="Item Type" id="Item-Type" value={Menu_Type} onChange={this.onChange} name="Menu_Type">
<option value="None">None</option>
<option value="Appetizers">Appetizers</option>
<option value="Entrees">Entrees</option>
</select>
</div>
<div className="form-group">
<label>Name</label>
<input
className="form-control"
type="text"
name="Name"
onChange={this.onChange}
value={Name}
required
/>
</div>
<div className="form-group">
<label>Description</label>
<input
className="form-control"
type="text"
name="Description"
onChange={this.onChange}
value={Description}
required
/>
</div>
<div className="form-group">
<label>Price</label>
<input
className="form-control"
type="text"
name="Price"
onChange={this.onChange}
value={Price}
required
/>
</div>
</div>
<div className="modal-footer">
<button type="button" id="cancel" className="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" className="btn btn-primary" >Change Items</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
)
}}export default connect(null,{editMenu})(MenuEditForm)
这是我的editMenu操作
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)));
我的editMenuAPI
class editMenuAPI(generics.GenericAPIView):
permission_classes=[
permissions.AllowAny
]
def post(self, request):
try:
print(request.data)
db = firebase.editMenu(request.data)
return Response({
"status": "success"
})
except:
return Response({
"status":"Disconnected",
"msg": 'There was a problem'
})
这是firebase中的editMenu函数。
def editMenu(request):
db=credentials().database()
mType = request['Menu_Type']
rID=request['rID']
iID =request['iID']
print(request)
request.pop("Menu_Type")
request.pop('rID')
request.pop('iID')
return db.child('Restaurants').child(rID).child("Menu").child(mType).child(iID).update(request)