jquery - simple ajax request with react.js -
im trying display data ajax request, done inside react.js. far no joy....
its trying pull data test web api, jquery installed, although not necessary, have looked @ alternatives, struggled far implement them.
for request trying 2 things, bind data , append method jquery, both don't work. else renders , console not spitting out errors.
i trying work towards generic function can ported on react-native, im stuck @ jquery implementation.
var url = 'https://demo2697834.mockable.io/movies'; //main logic var getstuff= react.createclass({ getinitialstate: function() { return { entries: [] }; }, componentdidmount: function() { $.ajax({ url: 'https://demo2697834.mockable.io/movies', datatype: 'json', cache: false, success: function(data) { this.setstate({entries: data}); $('.test').append(data); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.tostring()); }.bind(this) }); }, render: function() { return ( <div>{this.state.entries}</div> ); } }); //markup <body style={mainstyles.alldivs}> <header /> <getstuff/> <div class='test'></div> {this.props.children} <footer /> </body> update 1
so changed properties fit entries declaration. no change, , tried pass in props url parameter, no change either. have removed old school jquery append, im 100% trying on board react, shame not easy segway transition.
do need change in server config? using express?
update 2
it' seems componentdidmount function not calling @ all, save confusion post full code.
import react 'react'; import reactdom 'react-dom'; import $ "min-jquery"; import header './header'; import footer './footer'; //ajax request var getstuff= react.createclass({ getinitialstate: function() { return { entries: [] }; }, componentdidmount: function() { $.ajax({ url: 'https://demo2697834.mockable.io/movies', datatype: 'json', cache: false, success: function(data) { this.setstate({entries: data}); console.log('success'); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.tostring()); console.log('fail'); }.bind(this) }); }, render: function() { return ( <div> here: {this.state.entries} </div> ); } }); // stylesheet stuff here, not important post. //render var masterlayout = react.createclass({ render: function(){ return( <html lang="en"> <head> <title>{this.props.name}</title> </head> <body style={mainstyles.alldivs}> <header /> <getstuff /> {this.props.children} <footer /> </body> </html> ) } }); // no idea if correct setup, again docs lacking on real use of this. if(typeof window !== 'undefined') { reactdom.reder(<masterlayout />, document.getelementbyid("content")); } module.exports = masterlayout;
well can see you're not loading url, take this:
url: this.props.url, you've not assigned props called url. you've assigned variable named url @ top of file.
so can add along lines of this:
<getstuff url="https://demo2697834.mockable.io/movies" /> also noticed want port function on react-native. wouldn't use ajax that. fetch method...it's same ajax , it's react native uses default. https://facebook.github.io/react-native/docs/network.html
your request this:
fetch(this.props.url, { method: 'get', headers: { 'accept': 'application/json', }, }).then (function (response) {return response.json()}) .then(function (json) {/* here json */}) .catch(function (error) {/*handle error*/}); edit:
hmmm...it seems aren't able access props. try console.log this.props inside componentwillmount. think know reasoning behind this.props.url not working inside ajax function.
this. inside ajax function refers ajax this, , not react this. what bind ajax function or assign this.props.url variable outside ajax function (this do). examples:
componentdidmount: function() { var url = this.props.url; $.ajax({ url: url, btw, checkout question more details: react tutorial- why binding in ajax call
edit 2:
i noticed you're using plain react no typescript or architecture such redux. suggest using babel es6 , redux (it handles apps state, it's must! it's flux implementation).
i haven't used plain react in while , might have set proptypes , assign props in getinitialstate function.
proptypes: { url: react.proptypes.string, }, getinitialstate: function() { return { url: this.props.url, }; } you can go , access url value using this.state.url.
Comments
Post a Comment