使用 axios 和 ReactJS 进行反应选择后如何获取数据？

Posted 2023-02-22

【中文标题】使用 axios 和 ReactJS 进行反应选择后如何获取数据？

【英文标题】：How to get a data after react select using axios and ReactJS?

【发布时间】：2019-01-24 21:42:48

【问题描述】：

我是 ReactJS 的新手，我想在选择产品名称后通过 react select 获取价格值并显示它。

我的方法：

    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)

如何阅读和显示它？

【问题讨论】：

而不是返回response.data，您应该将它存储在状态中并引用它。这样你可以检查它是否存在，如果不显示一个空字符串，如果是则显示你的数据

@RobbieMilejczak 请问怎么做？

它将返回promise，您可以在插值运算符中使用promise(object)，这就是根本原因。

好吧，不要说return response.data，而是说this.setState( yourData: response.data)，而不是说`

在使用 ReactJS 并承诺时，这始终是您处理数据检索和存储的方式

【参考方案1】：

你必须使用地图，尝试像这样更改代码：

    constructor(props) 
        super(props);
        this.state = 
     Prix: [];
    render() 
    let 
          Prix
         = this.state.Prix;
    return (
     <td>
   this.state.Prix.map((pr, k) => 
      <p key=k >pr.PrixV </p>
                       ) 
                         </td>
    );
    PrixDisplay(selectprdt) 
        return axios.get("/app/getPrixprod/" + selectprdt).then(response => 
         if (response && response.data) 
            this.setState(
              Prix: response.data
            );
          

        ).catch(error => 
          console.error(error);

        );
      

我希望这会有所帮助。

【参考方案2】：

 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 仍然给出错误：- 将段落代码更改为

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

或者最好的方法是正确设置数据 让段落相同

<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 作为数组（对象）而不是原始数据类型。 希望这能解决问题。

【讨论】：

我想用 react select 选择产品名称后获取 Price 的值！我

等改变选择你要调用这个函数对吗？

更新了代码，更改产品名称时只需调用productNameSelected

这是我选择的 onChange ：handleselectprdtChange(index, value) const rowDataCopy = this.state.rowData.slice(0); rowDataCopy[index] = Object.assign(, rowDataCopy[index], selectprdt: value ); this.setState(rowData: rowDataCopy, ); 我只是把 Price 的方法放在渲染之后。

您能否分享整个代码、价格选择下拉菜单以及您如何传递价格？没有它就无法提供帮助