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

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

Why does Go error when trying to marshal this JSON? -