React: Data won't be saved to this.state





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















So I am trying to send a get request to my node server which is responding by sending a list of objects that I wish to display on my page.
Tried many different methods, but I cant seem to find a solution. Also I am rendering via the server if that's any help.



Client Code:



class BookTools extends React.Component {

constructor(props) {
super(props);
this.state = {
books:
};
this.handleAdd = this.handleAdd.bind(this);
this.handleEdit = this.handleEdit.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.updateList = this.updateList.bind(this);

fetch('/getbooks').then(function (res) {
return res.json();
}).then(function (json) {
console.log(json);
const data = JSON.stringify(json);
console.log(data);
this.setState({ books: data})
});
}


Can't use componentDidMount since it's SSR and can't seem to get componentWillMount to work either, so i tried doing it in the constructor as suggested by another. both console.logs prints out the correct response.



I have also tried doing both this.setState({ books: json.body }) and this.setState({ books: json.data }) with no other result. And yes i am quite new to react as well as node/express



Thanks for any help :)










share|improve this question





























    1















    So I am trying to send a get request to my node server which is responding by sending a list of objects that I wish to display on my page.
    Tried many different methods, but I cant seem to find a solution. Also I am rendering via the server if that's any help.



    Client Code:



    class BookTools extends React.Component {

    constructor(props) {
    super(props);
    this.state = {
    books:
    };
    this.handleAdd = this.handleAdd.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
    this.updateList = this.updateList.bind(this);

    fetch('/getbooks').then(function (res) {
    return res.json();
    }).then(function (json) {
    console.log(json);
    const data = JSON.stringify(json);
    console.log(data);
    this.setState({ books: data})
    });
    }


    Can't use componentDidMount since it's SSR and can't seem to get componentWillMount to work either, so i tried doing it in the constructor as suggested by another. both console.logs prints out the correct response.



    I have also tried doing both this.setState({ books: json.body }) and this.setState({ books: json.data }) with no other result. And yes i am quite new to react as well as node/express



    Thanks for any help :)










    share|improve this question

























      1












      1








      1








      So I am trying to send a get request to my node server which is responding by sending a list of objects that I wish to display on my page.
      Tried many different methods, but I cant seem to find a solution. Also I am rendering via the server if that's any help.



      Client Code:



      class BookTools extends React.Component {

      constructor(props) {
      super(props);
      this.state = {
      books:
      };
      this.handleAdd = this.handleAdd.bind(this);
      this.handleEdit = this.handleEdit.bind(this);
      this.handleDelete = this.handleDelete.bind(this);
      this.updateList = this.updateList.bind(this);

      fetch('/getbooks').then(function (res) {
      return res.json();
      }).then(function (json) {
      console.log(json);
      const data = JSON.stringify(json);
      console.log(data);
      this.setState({ books: data})
      });
      }


      Can't use componentDidMount since it's SSR and can't seem to get componentWillMount to work either, so i tried doing it in the constructor as suggested by another. both console.logs prints out the correct response.



      I have also tried doing both this.setState({ books: json.body }) and this.setState({ books: json.data }) with no other result. And yes i am quite new to react as well as node/express



      Thanks for any help :)










      share|improve this question














      So I am trying to send a get request to my node server which is responding by sending a list of objects that I wish to display on my page.
      Tried many different methods, but I cant seem to find a solution. Also I am rendering via the server if that's any help.



      Client Code:



      class BookTools extends React.Component {

      constructor(props) {
      super(props);
      this.state = {
      books:
      };
      this.handleAdd = this.handleAdd.bind(this);
      this.handleEdit = this.handleEdit.bind(this);
      this.handleDelete = this.handleDelete.bind(this);
      this.updateList = this.updateList.bind(this);

      fetch('/getbooks').then(function (res) {
      return res.json();
      }).then(function (json) {
      console.log(json);
      const data = JSON.stringify(json);
      console.log(data);
      this.setState({ books: data})
      });
      }


      Can't use componentDidMount since it's SSR and can't seem to get componentWillMount to work either, so i tried doing it in the constructor as suggested by another. both console.logs prints out the correct response.



      I have also tried doing both this.setState({ books: json.body }) and this.setState({ books: json.data }) with no other result. And yes i am quite new to react as well as node/express



      Thanks for any help :)







      node.js reactjs express fetch






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 23 '18 at 15:01









      ANicholassonANicholasson

      237




      237
























          1 Answer
          1






          active

          oldest

          votes


















          2














          It’s common issue in react. When you use regular function this context won’t be available so either you need to bind it or change it to arrow function.



          Also make sure the API returns data



          Change



              fetch('/getbooks').then(function (res) {
          return res.json();
          }).then(function (json) {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          });


          To



             fetch('/getbooks') 
          .then(res => res.json())
          .then(json => {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          });


          Or



             fetch('/getbooks')
          .then(function (res) {
          return res.json();
          }.bind(this))
          .then(function (json) {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          }.bind(this));





          share|improve this answer
























          • When i changed the code i got Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the BookTools component. which is also quite common for me, haha

            – ANicholasson
            Nov 23 '18 at 15:14













          • What do you mean by SSR? You are not recommended to make api call in constructor. Constructor is basically for initializing state and do function bindings.

            – Hemadri Dasari
            Nov 23 '18 at 15:16













          • Server Side Rendering

            – ANicholasson
            Nov 23 '18 at 15:18











          • Tried both solutions and still got the same warning :(

            – ANicholasson
            Nov 23 '18 at 15:20











          • I know, but since i am rendering via server i can't use stuff like componentDidMount etc.. So i was suggested to do it this way :S

            – ANicholasson
            Nov 23 '18 at 15:28












          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448964%2freact-data-wont-be-saved-to-this-state%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          2














          It’s common issue in react. When you use regular function this context won’t be available so either you need to bind it or change it to arrow function.



          Also make sure the API returns data



          Change



              fetch('/getbooks').then(function (res) {
          return res.json();
          }).then(function (json) {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          });


          To



             fetch('/getbooks') 
          .then(res => res.json())
          .then(json => {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          });


          Or



             fetch('/getbooks')
          .then(function (res) {
          return res.json();
          }.bind(this))
          .then(function (json) {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          }.bind(this));





          share|improve this answer
























          • When i changed the code i got Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the BookTools component. which is also quite common for me, haha

            – ANicholasson
            Nov 23 '18 at 15:14













          • What do you mean by SSR? You are not recommended to make api call in constructor. Constructor is basically for initializing state and do function bindings.

            – Hemadri Dasari
            Nov 23 '18 at 15:16













          • Server Side Rendering

            – ANicholasson
            Nov 23 '18 at 15:18











          • Tried both solutions and still got the same warning :(

            – ANicholasson
            Nov 23 '18 at 15:20











          • I know, but since i am rendering via server i can't use stuff like componentDidMount etc.. So i was suggested to do it this way :S

            – ANicholasson
            Nov 23 '18 at 15:28
















          2














          It’s common issue in react. When you use regular function this context won’t be available so either you need to bind it or change it to arrow function.



          Also make sure the API returns data



          Change



              fetch('/getbooks').then(function (res) {
          return res.json();
          }).then(function (json) {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          });


          To



             fetch('/getbooks') 
          .then(res => res.json())
          .then(json => {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          });


          Or



             fetch('/getbooks')
          .then(function (res) {
          return res.json();
          }.bind(this))
          .then(function (json) {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          }.bind(this));





          share|improve this answer
























          • When i changed the code i got Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the BookTools component. which is also quite common for me, haha

            – ANicholasson
            Nov 23 '18 at 15:14













          • What do you mean by SSR? You are not recommended to make api call in constructor. Constructor is basically for initializing state and do function bindings.

            – Hemadri Dasari
            Nov 23 '18 at 15:16













          • Server Side Rendering

            – ANicholasson
            Nov 23 '18 at 15:18











          • Tried both solutions and still got the same warning :(

            – ANicholasson
            Nov 23 '18 at 15:20











          • I know, but since i am rendering via server i can't use stuff like componentDidMount etc.. So i was suggested to do it this way :S

            – ANicholasson
            Nov 23 '18 at 15:28














          2












          2








          2







          It’s common issue in react. When you use regular function this context won’t be available so either you need to bind it or change it to arrow function.



          Also make sure the API returns data



          Change



              fetch('/getbooks').then(function (res) {
          return res.json();
          }).then(function (json) {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          });


          To



             fetch('/getbooks') 
          .then(res => res.json())
          .then(json => {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          });


          Or



             fetch('/getbooks')
          .then(function (res) {
          return res.json();
          }.bind(this))
          .then(function (json) {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          }.bind(this));





          share|improve this answer













          It’s common issue in react. When you use regular function this context won’t be available so either you need to bind it or change it to arrow function.



          Also make sure the API returns data



          Change



              fetch('/getbooks').then(function (res) {
          return res.json();
          }).then(function (json) {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          });


          To



             fetch('/getbooks') 
          .then(res => res.json())
          .then(json => {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          });


          Or



             fetch('/getbooks')
          .then(function (res) {
          return res.json();
          }.bind(this))
          .then(function (json) {
          console.log(json);
          const data = JSON.stringify(json);
          console.log(data);
          this.setState({ books: data})
          }.bind(this));






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 23 '18 at 15:10









          Hemadri DasariHemadri Dasari

          10.3k32156




          10.3k32156













          • When i changed the code i got Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the BookTools component. which is also quite common for me, haha

            – ANicholasson
            Nov 23 '18 at 15:14













          • What do you mean by SSR? You are not recommended to make api call in constructor. Constructor is basically for initializing state and do function bindings.

            – Hemadri Dasari
            Nov 23 '18 at 15:16













          • Server Side Rendering

            – ANicholasson
            Nov 23 '18 at 15:18











          • Tried both solutions and still got the same warning :(

            – ANicholasson
            Nov 23 '18 at 15:20











          • I know, but since i am rendering via server i can't use stuff like componentDidMount etc.. So i was suggested to do it this way :S

            – ANicholasson
            Nov 23 '18 at 15:28



















          • When i changed the code i got Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the BookTools component. which is also quite common for me, haha

            – ANicholasson
            Nov 23 '18 at 15:14













          • What do you mean by SSR? You are not recommended to make api call in constructor. Constructor is basically for initializing state and do function bindings.

            – Hemadri Dasari
            Nov 23 '18 at 15:16













          • Server Side Rendering

            – ANicholasson
            Nov 23 '18 at 15:18











          • Tried both solutions and still got the same warning :(

            – ANicholasson
            Nov 23 '18 at 15:20











          • I know, but since i am rendering via server i can't use stuff like componentDidMount etc.. So i was suggested to do it this way :S

            – ANicholasson
            Nov 23 '18 at 15:28

















          When i changed the code i got Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the BookTools component. which is also quite common for me, haha

          – ANicholasson
          Nov 23 '18 at 15:14







          When i changed the code i got Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the BookTools component. which is also quite common for me, haha

          – ANicholasson
          Nov 23 '18 at 15:14















          What do you mean by SSR? You are not recommended to make api call in constructor. Constructor is basically for initializing state and do function bindings.

          – Hemadri Dasari
          Nov 23 '18 at 15:16







          What do you mean by SSR? You are not recommended to make api call in constructor. Constructor is basically for initializing state and do function bindings.

          – Hemadri Dasari
          Nov 23 '18 at 15:16















          Server Side Rendering

          – ANicholasson
          Nov 23 '18 at 15:18





          Server Side Rendering

          – ANicholasson
          Nov 23 '18 at 15:18













          Tried both solutions and still got the same warning :(

          – ANicholasson
          Nov 23 '18 at 15:20





          Tried both solutions and still got the same warning :(

          – ANicholasson
          Nov 23 '18 at 15:20













          I know, but since i am rendering via server i can't use stuff like componentDidMount etc.. So i was suggested to do it this way :S

          – ANicholasson
          Nov 23 '18 at 15:28





          I know, but since i am rendering via server i can't use stuff like componentDidMount etc.. So i was suggested to do it this way :S

          – ANicholasson
          Nov 23 '18 at 15:28




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448964%2freact-data-wont-be-saved-to-this-state%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          Xamarin.form Move up view when keyboard appear

          Post-Redirect-Get with Spring WebFlux and Thymeleaf

          Anylogic : not able to use stopDelay()