Javascript 更新数据时出现React.js错误

我想在提供drugid时更新字段。但当我选择drugid为1并单击更新按钮时，它会显示“localhost:8081/Druge/1”未找到。在mongodb中也有自动生成的_id列。当我使用postman并尝试使用mongo _id进行更新时，它会起作用。如何通过我的drugid进行更新。请帮助

更新的rughandler.jsx

"严格使用",

 import React, { Component } from 'react';
  import axios from 'axios';
   import UpdateDrugController from '../Controllers/UpdateDrugController';
   import PropTypes            from 'prop-types';


export default class UpdateDrugHandler extends Component {
// static get propTypes() {
//     return {
//         user: PropTypes.object
//     }
// }
constructor(props) {
  super(props);
//   this.user = this.props.user;

  this.state = {
     drugs: []
  };
  this.updateDrug = this.updateDrug.bind(this);
 }  
   updateDrug(drugid,drugname,drugqty,remark,drugtype,
   drugcreatedate,drugdosage,drugcreatedby,drugexpiration,drugprice){
   axios.put(`http://localhost:8081/drug/` + drugid ,{
    drugid:drugid,
    drugname:drugname,
    drugqty:drugqty,
    remark:remark,
    drugtype:drugtype,
    drugcreatedate:drugcreatedate,
    drugdosage:drugdosage,
    drugcreatedby:drugcreatedby,
    drugexpiration:drugexpiration,
    drugprice:drugprice


}).then(res=>{
    console.log(res);
})
 }
 render() {
  return <div>
       <UpdateDrugController
            updateDrug={this.updateDrug}
        />
  </div>
}
 }

import React，{Component}来自'React'；
从“axios”导入axios；
从“../Controllers/UpdateDrugController”导入UpdateDrugController；
从“道具类型”导入道具类型；
导出默认类UpdateDrugHandler扩展组件{
//静态get propTypes（）{
//返回{
//用户：PropTypes.object
//     }
// }
建造师（道具）{
超级（道具）；
//this.user=this.props.user；
此.state={
药物：[]
};
this.updateDrug=this.updateDrug.bind（this）；
}  
updateDrug（药物ID、药物名称、药物数量、备注、药物类型、，
药物创建日期、药物剂量、药物创建日期、药物有效期、药物价格）{
axios.put(`http://localhost:8081/drug/`+药物ID{
drugid:drugid，
drugname:drugname，
药量：药量，
备注:备注:，
drugtype:drugtype，
drugcreatedate:drugcreatedate，
药量：药量，
drugcreatedby:drugcreatedby，
药物过期：药物过期，
药价
})。然后（res=>{
控制台日志（res）；
})
}
render（）{
返回
}
}

UpdateDrugController.jsx

'use strict';

import React, {Component} from 'react';
import axios from 'axios';

export default class UpdateDrugController extends Component {
constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
    this.state = {
        users: []
    }
        this.getAllUsers();

}

    onSubmit(event){
    event.preventDefault();
    this.props.updateDrug(
        this.drugid.value,
        this.drugname.value,
        this.drugqty.value,
        this.remark.value,
        this.drugtype.value,
        this.drugcreatedate.value,
        this.drugdosage.value,
        this.drugcreatedby.value,
        this.drugexpiration.value,
        this.drugprice.value,

    );
    this.drugid.value='';
    this.drugname.value='';
    this.drugqty.value='';
    this.remark.value='';
    this.drugtype.value='';
    this.drugcreatedate.value='';
    this.drugdosage.value='';
    this.drugcreatedby.value='';
    this.drugexpiration.value='';
    this.drugprice.value='';

   }

getAllUsers() {
    axios.get(`http://localhost:8081/drug`).then(res => {
        this.setState({
            users: res.data.data || res.data
        });
    })
}

render() {
    return <div>
        <div class="ui grid">
 <div class="three column row">
<div class="column"></div>


        <div class="ui icon message">
        <i class="inbox icon"></i>
        <div class="content">
            <div class="header">
            xxx
            </div>
            <p>Get the best news in your e-mail every day.</p>
        </div>
        </div>


        <form class="ui tiny form">
        <div class="ui compact message">
        <p>New Drugs</p>
        </div>
        <div class="field"><label>First Name</label><input maxlength="6" placeholder="DrugID" ref={drugid=>this.drugid=drugid}/></div>
        <div class="field"><label>First Name</label><input maxlength="6" placeholder="Drug Name" ref={drugname=>this.drugname=drugname}/></div>              
        <div class="field"><label>First Name</label><input maxlength="6" placeholder="Quantity" ref={drugqty=>this.drugqty=drugqty}/></div>              
        <div class="field"><label>First Name</label><input maxlength="10" placeholder="Remark" ref={remark=>this.remark=remark}/></div>              
        <div class="field"><label>First Name</label><input maxlength="6" placeholder="Drug Type" ref={drugtype=>this.drugtype=drugtype}/></div>              
        <div class="field"><label>First Name</label><input maxlength="6" placeholder="Created Date" ref={drugcreatedate=>this.drugcreatedate=drugcreatedate}/></div>              
        <div class="field"><label>First Name</label><input maxlength="6" placeholder="Drug Dosage" ref={drugdosage=>this.drugdosage=drugdosage}/></div>
        <div class="field"><label>First Name</label><input maxlength="6" placeholder="Drug Created" ref={drugcreatedby=>this.drugcreatedby=drugcreatedby}/></div>
        <div class="field"><label>First Name</label><input maxlength="6" placeholder="Drug Expiration" ref={drugexpiration=>this.drugexpiration=drugexpiration}/></div>
        <div class="field"><label>First Name</label><input maxlength="6" placeholder="Drug Price" ref={drugprice=>this.drugprice=drugprice}/></div>
        <div class="field"><label>First Name</label><button  class="ui primary button" onClick={this.onSubmit}>Update </button></div>
        </form>


        <div class="column">ssssssssssss</div>
        <div class="column">ssssssssssssssc</div>
        </div>
        </div>     

        </div>

}
}

“严格使用”；
从“React”导入React，{Component}；
从“axios”导入axios；
导出默认类UpdateDrugController扩展组件{
建造师（道具）{
超级（道具）；
this.onSubmit=this.onSubmit.bind（this）；
此.state={
用户：[]
}
这个.getAllUsers（）；
}
提交（事件）{
event.preventDefault（）；
this.props.updateDrug(
这个.drugid.value，
this.drugname.value，
此.drugqty.value，
这句话的意思是，
这个.drugtype.value，
this.drugcreatedate.value，
这个.剂量.值，
此.drugcreatedby.value，
这个.drugexpiration.value，
这个，价格，价值，
);
this.drugid.value=''；
this.drugname.value=''；
此.drugqty.value=''；
this.remark.value=''；
this.drugtype.value=''；
this.drugcreatedate.value=''；
this.drugaDoctor.value=''；
this.drugcreatedby.value=''；
this.drugexpiration.value=''；
this.drugprice.value=''；
}
getAllUsers（）{
axios.get(`http://localhost:8081/drug`)。然后（res=>{
这是我的国家({
用户：res.data.data | | res.data
});
})
}
render（）{
返回
xxx
每天从电子邮件中获取最好的消息

新药

名字this.drugid=drugid}/>
名字this.drugname=drugname}/>
名字this.drugqty=drugqty}/>
名字this.remark=remark}/>
名字this.drugtype=drugtype}/>
名字this.drugcreatedate=drugcreatedate}/>
第一个名字this.drugaDoctor=drugaDoctor}/>
名字this.drugcreatedby=drugcreatedby}/>
名字this.drugexpiration=drugexpiration}/>
名字this.drugprice=drugprice}/>
名字更新
SSSSSSSSSS
SSSSSSSSSS C
}
}

检查返回的内容。您正在将

药物

设置为该呼叫返回的内容。查看您得到的错误，它可能没有返回数组，在这种情况下，

druges

没有函数

map

使用此代码更新About.jsx代码

'use strict';

import React, { Component } from 'react';
import axios from 'axios';

export default class Home extends Component {
   constructor(props) {
      super(props);
      this.state = {
         drugs: []
      };
   }

   componentWillMount() {
      axios.get(`http://localhost:8081/drug`).then(res => {
         const drugs = res.data;
         this.setState({ drugs });
         console.log(drugs);

      })
   }

   render() {
      return <div>
         <h2>This is the available Drug list</h2>
         <div>
            {
               this.state.drugs && this.state.drugs.map(drug =>
                  <div>
                     <table border="1">
                        <tr>
                           <td><span key={drug._id}>DrugID:{drug.drugid}</span></td>
                           <td><span key={drug._id}>Drug Name:{drug.drugname}</span></td>
                           <td><span key={drug._id}>Quantity:{drug.drugqty}</span></td>
                           <td><span key={drug._id}>Remark:{drug.remark}</span></td>
                           <td><span key={drug._id}>Drug Type:{drug.drugtype}</span></td>
                           <td><span key={drug._id}>Created Date:{drug.drugcreatedate}</span></td>
                           <td><span key={drug._id}>Drug Dosage:{drug.drugdosage}</span></td>
                           <td><span key={drug._id}>Drug Created By:{drug.drugcreatedby}</span></td>
                           <td><span key={drug._id}>Drug Expiration:{drug.drugexpiration}</span></td>
                           <td><span key={drug._id}>Drug Price:{drug.drugprice}</span></td>
                           <td><span key={drug._id}>Danger Level:{drug.dangerlevel}</span></td>
                        </tr>
                     </table>
                  </div>
               )
            }
         </div>
      </div>
   }
}

“严格使用”；
从“React”导入React，{Component}；
从“axios”导入axios；
导出默认类Home extends组件{
建造师（道具）{
超级（道具）；
此.state={
药物：[]
};
}
组件willmount（）{
axios.get(`http://localhost:8081/drug`)。然后（res=>{
常量药物=res.数据；
这个.setState（{drugs}）；
控制台日志（药物）；
})
}
render（）{
返回
这是可用的药物清单
{
this.state.drugs&&this.state.drugs.map（druge=>
DrugID:{druge.DrugID}
药物名称：{druge.drugname}
数量：{druge.drugqty}
备注：{药物备注}
药物类型：{Drug.drugtype}
创建日期：{druge.drugcreatedate}
药物剂量：{药物。药物剂量}
药物创建人：{Drug.drugcreatedby}
药物过期：{Drug.drugexpiration}
药品价格：{Drug.drugprice}
危险级别：{drug.dangerlevel}
)
}
}
}

我正在使用新浏览器。我对药物的定义有误吗？Object{data:“Drug Added”，status:200，statusText:“OK”，headers:Object，config:Object…}config:Object data:“Drug Added”headers:Object请求：XMLHttpRequest状态：200 statusText:“OK”proto:Object这是postman为上述url提供的，在代码上编辑。plz检查这是否有效。this.setState（{drugs:drugs.data}）；