Full React Tutorial #17 - Fetching Data with useEffect

all right then gang so now we have jason's server running and watching our db file so we have these different endpoints what i'm going to do now is try to fetch that data inside this use effect hook and remember that's going to run at the minute when the component first renders and that's the only time it's going to run because we have this empty dependency array inside it so we're just going to fetch this data once when the component first renders now before we do that what i want to do is empty all of the states from here because we're not going to use that anymore and instead we'll set the initial value of the blogs to be null then once we've successfully fetched the data from this file over here we're going to update this date using set blogs with the data we get back so let's make that fetch request so we'll say fetch and then we need an end point which is this thing so i'm just gonna copy this and paste it inside a string right here so that's a get request to localhost port 8000 forward slash blogs now this returns to us a promise and so i can tack on a then method and by the way we can't make this async you can't use a weight inside this if you wanted to externalize a function with all of this logic inside it and make that asynchronous you could do but i'm not going to do that i'm instead just going to use the then method so this will fire a function once this promise has resolved so once we have the data back and first of all we get a response object now this response object isn't actually the data it's just a response object and in order to get the data we have to do something with that response object and this is just when we use the fetch api this thing right here so to get the data we say response dot json and this passes the json into a javascript object for us now we need to return this value right here and then when we return this this whole thing now returns another promise because this is also asynchronous and it takes some time to do so what i do is tack on another then block which is going to fire a function once this bit right here is complete and then this function takes in as a parameter the actual data that this gets us so it might seem like a long winded process to get the data but it's just two steps we get the response object use the json method on that and then tack on another then method whereby we get the data so this data now is going to be whatever is in here in a javascript object format or rather a javascript array because we have an array of data so then let's for now just log this to the console console.log data and in fact just so we don't get an error i'm going to comment out this stuff for now right here so let me save that and i'm going to open up oops not the source i want the console inspect and if i pull this over here and go to the console we can see this data right here so an array of two blocks so all i want to do now is update the state that we have right here with this value so to do that remember we can use set blocks and this is not going to cause an infinite loop because remember we have this empty dependency array and that means only ever fire this function once on the initial render not whenever the data changes okay so underneath where we log out the data i'm just going to use the set blogs function which is this thing right here and then i'm going to pass in the data which is what we have right here so all we're doing is taking that array of objects and updating the blog state with that array so then now we've done that we could uncomment this but there might still be an error here and i'll tell you why in a second first of all let me save this and then yep we can see this error over here and it says cannot read property map of null so what's going on there well right here we're passing the blogs as a prop through to the blog list and then inside the blog list this is where the error is occurring we're trying to map through the blogs that we pass through now the blogs should be the data right and we've seen that in the console so why is it not working well it's not working because it takes a fraction of time to get that data and initially the value of blogs is null and down here we're passing in null when the application first loads in the browser and so over here blogs is null and we're trying to use the map method on null at the very start once we get the data it should work fine but to begin with until we have that data we get that error so how do we combat this well really we don't want to output this until we have a value for blocks so what we could do is a little dynamic check here i'm going to do curly braces around this because what we're going to do is some javascript and remember to do javascript inside the template we need the curly braces and all i'm going to do is say blocks and then ampersand so this is logical and in javascript so this will actually work now and let me demo that and then i'll briefly explain it so i've saved it and now over here i'm going to refresh and now we see it works right we get that data and we output it but why is this working well this is how we do a bit of conditional templating in react logical and evaluates the left first and if this is false it never even bothers with the rights so this to begin with is gonna be null and since null evaluates to false it doesn't bother with the right-hand side of the logical and and therefore it doesn't output this thing right here that's the way javascript works now if this evaluates as true it doesn't output anything to the screen that's not what we're doing here but then what it does is move on to the right hand side of the logical and and evaluates this and when it evaluates this it outputs it to the screen so the thing on the right is only ever going to be output if the thing on the left is true and that's generally how we conditionally output parts of template and we're going to see more of that as we go forward but that right there is why it works and that's everything we need to do so what we're doing is fetching the data as soon as the component first renders at that moment in time once we have the data we update the state right here once we update the state and it has a value it outputs this and passes through that value then we cycle through them and then we render them to the dom so there we go let's just make sure this works again yep all works now there's one more thing i want to do and that is to get rid of this thing to delete the blog because now if we're deleting the blog it's just from local data and yes it will work because now we're storing this in local data in the state but ultimately we're going to make delete requests to this file over here so let me get rid of that functionality for now because we don't really need it anymore so this handle delete function i'm going to get rid of and then we can delete it from here as a prop as well we don't need it there save that and then over in blog list we don't need handle delete and we don't need this button at the bottom to delete it either so let's save that yep now it's gone okay cool so next we're gonna see more about conditional templates and how to output a loading message as we're trying to fetch the data

Channel: Net Ninja

Views: 313,459

Keywords: react, react tutorial, tutorial, modern react, modern react tutorial, react 16, react 17, complete react, react vs vue, react tutorial for beginners, react for beginners, create react app, create-react-app, react course, react router, react hooks, react hooks tutorial, useEffect, useEffect fetch, useEffect tutorial

Id: qdCHEUaFhBk

Length: 7min 55sec (475 seconds)

Published: Fri Jan 08 2021