ReactJs में jsx में API मान कैसे प्राप्त करें? मुझे API से सभी मान मिल रहे हैं। लेकिन इसे UI में प्रिंट नहीं कर सकते। क्या कोई मदद कर सकता है?
मेरा कोड:
...
constructor (props) {
super(props)
this.state = {
search_event: "",
lists: []
};
}
...
componentDidMount() {
var apiBaseUrl = "http://api.eventsacross-stage.railsfactory.com/api/";
var input = this.state.search_event;
axios.get(apiBaseUrl+"v1/events/?on_dashboard=false"+input)
.then(function (response) {
console.log(response);
for(var i = 0; i < response.data.events_count; i++) {
var obj = response.data.events[i];
console.log(obj);
}
list: response.data.events;
})
.catch(function (error) {
console.log(error);
});
}
...
return(
<div>
{this.state.lists.map(function(list){
return(
<div>{list.name}</div>
);
})}
{/*here I want the values*/}
</div>
);
उत्तर:
जवाब के लिए 0 № 1रेंडर में प्रतिक्रिया का उपयोग करने के लिए, आपको राज्य को प्रतिक्रिया सेट करनी चाहिए। फिर आप रेंडर करने के लिए इवेंट ऑब्जेक्ट के माध्यम से लूप कर सकते हैं। ऐशे ही
constructor (props) {
super(props)
this.state = {
search_event: "",
lists: [],
events: []
};
}
...
componentDidMount() {
var apiBaseUrl = "http://api.eventsacross-stage.railsfactory.com/api/";
var input = this.state.search_event;
var events = axios.get(apiBaseUrl+"v1/events/?on_dashboard=false"+input)
.then(function (response) {
return response.data.events;
})
.catch(function (error) {
console.log(error);
});
this.setState(events: events);
}
render(){
return (
<div>
{this.state.lists.map(function(list){
return(
<div>{list.name}</div>
);
})}
{this.state.events.map(function (event) {
return (
<div>{event.name}</div>
)
})}
</div>
)
}