Javascript 如何在axios上选择参数？

我是ReactJs的新手，我在MySQL上有一个表产品，我在ReactJs上用MySQL和后端的NodeJs开发了一个动态表，我的动态表有四列：产品、数量、价格和总额，我想当我在产品列上选择一个产品时，这个价格会显示在它的列上

我的路由器是：

exports.getPrixprod = function(req,res) {

    connection.query('SELECT PrixV FROM produits where Nomp = ?', [req.params.Nomp], function(error, results, fields) {
        if (error) throw error;
        res.send(JSON.stringify(results));
        console.log(results);
    });
}

我的班级是：

class AjouterFacture extends Component {
  constructor(props) {
    super(props);
    this.state = {

      Produits: [],
      Quantite: "",
      Prix: "",
      lineItemData: [],
       selectprdt: props.match.params.selectprdt,
      id: 0
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRowDelete = this.handleRowDelete.bind(this);
    this.handleRowAdd = this.handleRowAdd.bind(this);
    this.getTotal = this.getTotal.bind(this);
    this.DatefactChanged = this.DatefactChanged.bind(this);
    this.handleQuantiteChange = this.handleQuantiteChange.bind(this);
    this.handleselectprdtChange = this.handleselectprdtChange.bind(this);

  }
  componentWillReceiveProps(nextProps) {
    console.log("nextProps", nextProps);
  }
  componentDidMount() {
    axios({
      method: "get",
      url: "/app/getNomprod/",
      withCredentials: true,
    }).then(response => {
      if (response && response.data) {
        this.setState({
          Produits: response.data
        });
      }
    }).catch(error => console.log(error));

  }
  popupAjout(event) {
    const getAlert = () => (<SweetAlert 
       success 
       title="Ajout facture"
     onConfirm={ this.handleSubmit}
        >
   UNe facture  est ajoutée avec succés 
      </SweetAlert>);
    this.setState({
      alert: getAlert()
    });
  }
  handleSubmit() {

    var lp = {
      Nomp: this.state.selectprdt,
      QuantiteF: this.state.QuantiteF,
    }
    axios({
      method: 'post',
      url: '/app/ajouterlp/',
      data: lp,
      withCredentials: true,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    }).then(function(response) {
      this.setState({
        alert: null
      });
      this.props.history.push('/factures/listefactures')
    }.bind(this))


  handleQuantiteChange(index, value) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
      Quantite: parseInt(value, 10)
    });
    this.setState({
      rowData: rowDataCopy
    });
  }
  handleselectprdtChange(index, value) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
      selectprdt: value

    });

     axios({
      method: "get",
      url: "/app/getPrixprod/" + this.props.match.params.selectprdt,
      withCredentials: true,
    }).then(response => {
      if (response && response.data) {
        this.setState({
          Prix: response.data

        });
    }; console.log(response.data);


    }).catch(error => console.log(error));
    this.setState({
      rowData: rowDataCopy
    });


  }

  render() {

    let {
      Clients
    } = this.state.Clients;
    var Cd = {
      pointerEvents: 'none'
    }
    let {
      Produits
    } = this.state.Produits;
    let {
      rowData
    } = this.state.rowData;
    const Prix = this.state;
    return (<div className="animated fadeIn">




 <h6>  <Label ><strong>Veuillez ajouter au moins un produit :  </strong></Label></h6>
        <Table responsive style={items} >
        <thead style={back}>
                  <tr>
                    <th>PRODUIT</th>
                    <th>QUANTITE</th>
                    <th>PRIX UNITAIRE</th>
                    <th>TOTAL</th>
                    <th></th>
                  </tr>
                  </thead>
                  <tbody>
                {this.state.rowData.map((data, index) => (
              <tr key={index} id={index}>
                <td>
                  {" "}  <Input type="select" name="selectedcl" id="selectcl"
                          placeholder="Veuillez sélectionner un produit"  value={data.selectprdt}
                    onChange={(e) => this.handleselectprdtChange(index, e.target.value)} >
           <option  key={-1} hidden>Choisisr un produit</option>


                     {  this.state.Produits.map((pdt, i) => 
                     <option key={i}  value="select">{pdt.Nomp}</option>
                     )} 


                      </Input>
                    </td>
                    <td><Input type="number" 
                          value={data.Quantite || 0} onChange={(e) => this.handleQuantiteChange(index, e.target.value)}/></td>
                    <td>



                        <p>{ this.state.Prix} DT</p>


                        </td>
                <td  > 



                     <p key={index} className='pa2 mr2 f6'>{(data.Quantite || 0) * (Prix )}  DT</p>



                    </td>
                    <td>
                     <Button onClick={(e) => this.handleRowDelete(index)} active style={center}  size="sm" color="danger" className="btn-pill" aria-pressed="true">Effacer</Button>
      </td>{" "}
              </tr>
            ))}



                  <tr>

            <td/>
            <td/>
            <td/>
            <td/>
            <td><Button onClick={this.handleRowAdd} active style={center}  size="sm" color="info" className="btn-pill" aria-pressed="true">Ajouter une ligne</Button></td>
          </tr>
        </tbody>

        <tfoot>
          <tr>

            <th></th>
            <th >Grand total :</th>
            <th>{this.getTotal()} DT</th>
            <th></th>
          </tr>
</tfoot>

        </Table>




        </div>);
  }
  getTotal() {
    let grandTotal = 0;
    const rowTotals = this.state.rowData.map(row => (row.Quantite * row.PrixV) || 0);
    if (rowTotals.length > 0) {
      grandTotal = rowTotals.reduce((acc, val) => acc + val);
    }
    return grandTotal;
  }
  handleRowDelete(row) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy.splice(row, 1);
    this.setState({
      rowData: rowDataCopy
    });
  }
  handleRowAdd() {
    let id = this.state.id;
    id = id++;
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy.push({
      selectprdt: "",
      Quantite: 0,
      Prix: 0
    });
    this.setState({
      rowData: rowDataCopy,
      id: id
    });
  }
}
export default AjouterFacture;

类AjouterFacture扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[]，
量子化：“，
大奖赛：“，
lineItemData:[]，
selectprdt:props.match.params.selectprdt，
身份证号码：0
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleRowDelete=this.handleRowDelete.bind（this）；
this.handleRowAdd=this.handleRowAdd.bind（this）；
this.getTotal=this.getTotal.bind（this）；
this.DatefactChanged=this.DatefactChanged.bind（this）；
this.handleQuantiteChange=this.handleQuantiteChange.bind（this）；
this.handleselectprdtChange=this.handleselectprdtChange.bind（this）；
}
组件将接收道具（下一步）{
log（“nextrops”，nextrops）；
}
componentDidMount（）{
axios({
方法：“获取”，
url:“/app/getNomprod/”，
事实上，
})。然后（响应=>{
if（response&&response.data）{
这是我的国家({
产品：response.data
});
}
}).catch（错误=>console.log（错误））；
}
popupAjout（事件）{
常量getAlert=（）=>(
这是成功的关键
);
这是我的国家({
警报：getAlert（）
});
}
handleSubmit（）{
var lp={
Nomp:this.state.selectprdt，
QuantiteF:this.state.QuantiteF，
}
axios({
方法：“post”，
url:“/app/ajouterlp/”，
数据：lp，
事实上，
标题：{
“访问控制允许来源”：“*”，
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
}
}).然后（功能（响应）{
这是我的国家({
警报：空
});
this.props.history.push（“/factures/listfactures”）
}.绑定（本）
HandleQuantitechRange（索引、值）{
const rowDataCopy=this.state.rowData.slice（0）；
rowDataCopy[index]=Object.assign（{}，rowDataCopy[index]{
Quantite:parseInt（值，10）
});
这是我的国家({
rowData:rowDataCopy
});
}
handleselectprdtChange（索引、值）{
const rowDataCopy=this.state.rowData.slice（0）；
rowDataCopy[index]=Object.assign（{}，rowDataCopy[index]{
选择prdt:value
});
axios({
方法：“获取”，
url:“/app/getPrixprod/”+this.props.match.params.selectprdt，
事实上，
})。然后（响应=>{
if（response&&response.data）{
这是我的国家({
Prix:response.data
});
}；console.log（response.data）；
}).catch（错误=>console.log（错误））；
这是我的国家({
rowData:rowDataCopy
});
}
render（）{
让{
客户
}=this.state.Clients；
变量Cd={
pointerEvents:“无”
}
让{
产品
}=this.state.Produits；
让{
行数据
}=this.state.rowData；
const Prix=this.state；
返回(
Veuillez AJAOUTER au MOIN un PRODUCT:
产品
定量
统一大奖赛
全部的
{this.state.rowData.map（（数据，索引）=>(
{“”}this.handleselectprdtChange（索引，e.target.value）}>
选唱诗班
{this.state.Produits.map（（pdt，i）=>
{pdt.Nomp}
)} 
this.handleQuantiteChange（index，e.target.value）}/>
{this.state.Prix}DT

{（data.Quantite | | 0）*（Prix）}DT
this.handleRowDelete（index）}active style={center}size=“sm”color=“danger”className=“btn pill”aria pressed=“true”>Effacer
{" "}
))}
外部对齐
总计：
{this.getTotal（）}DT
);
}
getTotal（）{
设grandTotal=0；
const rowTotals=this.state.rowData.map（row=>（row.Quantite*row.PrixV）| | 0）；
如果（rowTotals.length>0）{
grandTotal=行总数。减少（（acc，val）=>acc+val）；
}
返回总计；
}
HandlerRowDelete（行）{
const rowDataCopy=this.state.rowData.slice（0）；
rowDataCopy.splice（第1行）；
这是我的国家({
rowData:rowDataCopy
});
}
handleRowAdd（）{
设id=this.state.id；
id=id++；
const rowDataCopy=this.state.rowData.slice（0）；
rowDataCopy.push({
选择PRDT:“”，
数量：0，
大奖赛：0
});
这是我的国家({
rowData:rowDataCopy，
id:id
});
}
}
导出默认的外部特性；

当我使用Postman运行后端时，它工作正常，但当我运行前端时，我会在控制台上获得价格

[]

，并在网络控制台上获得select

undefined

的值：

我怎样才能解决这个问题呢？

更改：

let{
产品
}=this.state.Produits

为了

let{
产品
}=本州；
要引用
此.props.match.params
您需要使用
react router
。如果你是阿尔
import { withRouter } from 'react-router';
class AjouterFacture extends Component {
...
}

export default withRouter(AjouterFacture);

<Route path='/facture/:selectprdt' component={AjouterFacture}>

let {
  Clients
} = this.state.Clients;
let {
  Produits
} = this.state.Produits;
let {
  rowData
} = this.state.rowData;

const {
  Clients, Produits, rowData
} = this.state;