时间戳

首页 > 解决方案 > 如何在使用 axios 和 ReactJS 做出反应选择后获取数据？

javascript - 如何在使用 axios 和 ReactJS 做出反应选择后获取数据？

问题描述

我是 ReactJS 的新手，我想在选择产品名称后通过反应选择获得一个价格值并显示它。

我的方法：

    constructor(props) {
        super(props);
        this.state = {
     PrixV: ""

     }
        PrixDisplay(selectprdt) {
            return axios.get("/app/getPrixprod/" + selectprdt).then(response => {
             if (response && response.data) {
                this.setState({
                  PrixV: response.data
                });
              }
console.log(response.data)
            }).catch(error => {
              console.error(error);
            });
          }

我尝试通过以下方式读取此值：

<p>{this.state.PrixV} </p>

当我运行它时，价格列上没有显示任何内容，在我选择产品名称后，我得到：

Objects are not valid as a React child (found: object with keys {PrixV}). If you meant to render a collection of children, use an array instead.
    in p (at AjouterFacture.js:383)

控制台返回：

[{…}]0: {PrixV: "250.000"}length: 1__proto__: Array(0)

如何阅读和显示它？

标签： javascriptreactjsgetaxiosreact-select

解决方案

 constructor(props) {
          super(props);
          this.state = {
                mydata: ''
};

productNameSelected(selectprdt) {//not sure from where you will get selectprdt variable , but something like this will work
    axios.get("/app/getPrixprod/" + selectprdt).then(response => {
        if (response && response.data) {
          this.setState( {mydata : response.data});
      }
      console.log(response.data)
      })
  }

<p>{this.state.mydata} </p> //my data should not be a object , so you need to make string if you wnat to directly use it here

编辑

我可以看到你能够得到响应，但是 react 仍然给出错误：- 将 paragrah 代码更改为

<p>{this.state.PrixV[0].PrixV} </p>

或者最好的方法是正确设置数据，所以让 paragrah 相同

<p>{this.state.PrixV} </p>

PrixDisplay(selectprdt) {
    return axios.get("/app/getPrixprod/" + selectprdt).then(response => {
        if (response && response.data && response.data[0]) {
            this.setState({
            PrixV: response.data[0].PrixV
            });
        }
            console.log(response.data)
        }).catch(error => {
        console.error(error);
    });
}

您收到错误是因为当前您将 PrixV 作为数组（对象）而不是原始数据类型。希望这能解决问题。

推荐阅读