[英]How to get a data after react select using axios and ReactJS?
I am newbie on ReactJS, I want to get a Price value just after the select of the Product name by react select and display it. 我是ReactJS的新手,我想在选择产品名称之后获得一个Price值,然后选择并显示它。
My method : 我的方法:
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);
});
}
I try to read this value by : 我尝试通过以下方式读取此值:
<p>{this.state.PrixV} </p>
When I run it, nothing is displayd on the Price column and after I select the product name, I get : 当我运行它时,价格列上没有显示任何内容,在我选择产品名称后,我得到:
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)
And the console returns : 然后控制台返回:
[{…}]0: {PrixV: "250.000"}length: 1__proto__: Array(0)
How can I read and display it ? 我该如何阅读和显示它?
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
Edit 编辑
I can see you are able to get the response , but react still gives error:- change the paragrah code to 我可以看到你能够得到响应,但反应仍然给出错误: - 将paragrah代码更改为
<p>{this.state.PrixV[0].PrixV} </p>
Or The good way will be to set the data properly so let paragrah be same 或者好的方法是正确设置数据,所以让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);
});
}
You are getting the error because currently you are getting PrixV as an array(object) not a primitive data type. 您收到错误,因为目前您将PrixV作为数组(对象)而非原始数据类型。 Hope this solves the issue.
希望这能解决问题。
You must use the map, try to change the code like this : 您必须使用地图,尝试更改代码,如下所示:
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);
});
}
I hope that's will be helpful. 我希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.