Skip to main content
added 444 characters in body
Source Link

I would change your code to something like this

const [arr, setArr] = React.useState([]);
const [dataLoaded, setDataLoaded] = React.useState(false);
useEffect(() => {
    axios.get('http://localhost:8000/get-data/')
    .then(res => {
        if (res.data) {
          const data = res.data
          const items = []
          data.forEach(item => items.push(item))
          setArr(items)
        }
    })
    .then(res => {
      //here remove the condition arr.length > 0
      //instead you should have conditional rendering in your app
      //so if the data is loaded display <>No Items Found</> or something
      setDataLoaded(true)
    })
}, [])

the reason you want to remove the conditional setDataLoaded(true) is because what if you fetch and the fetch returns [], then your dataLoaded is false even though it actually is done loading. Also are you sure that you are fetching the data? like if you add console.log(data) in your fetch you see it loading?

There is also a hackish way of forcing a rerender by doing something like this

const [isRerender, setIsRerender] = React.useState(false)

then you would want to add something like this at the end of your api call

.finally(() => {setIsRerender(!isRerender)})

I do NOT recommend this but I have used it before and it is a possibility. But this should really be last resort type of thing because your code should be working.

If any of my code is confusing or does not make sense, let me know and I'll explain in more depth.

I would change your code to something like this

const [arr, setArr] = React.useState([]);
const [dataLoaded, setDataLoaded] = React.useState(false);
useEffect(() => {
    axios.get('http://localhost:8000/get-data/')
    .then(res => {
        if (res.data) {
          const data = res.data
          const items = []
          data.forEach(item => items.push(item))
          setArr(items)
        }
    })
    .then(res => {
      //here remove the condition arr.length > 0
      //instead you should have conditional rendering in your app
      //so if the data is loaded display <>No Items Found</> or something
      setDataLoaded(true)
    })
}, [])

the reason you want to remove the conditional setDataLoaded(true) is because what if you fetch and the fetch returns [], then your dataLoaded is false even though it actually is done loading. Also are you sure that you are fetching the data? like if you add console.log(data) in your fetch you see it loading?

If any of my code is confusing or does not make sense, let me know and I'll explain in more depth.

I would change your code to something like this

const [arr, setArr] = React.useState([]);
const [dataLoaded, setDataLoaded] = React.useState(false);
useEffect(() => {
    axios.get('http://localhost:8000/get-data/')
    .then(res => {
        if (res.data) {
          const data = res.data
          const items = []
          data.forEach(item => items.push(item))
          setArr(items)
        }
    })
    .then(res => {
      //here remove the condition arr.length > 0
      //instead you should have conditional rendering in your app
      //so if the data is loaded display <>No Items Found</> or something
      setDataLoaded(true)
    })
}, [])

the reason you want to remove the conditional setDataLoaded(true) is because what if you fetch and the fetch returns [], then your dataLoaded is false even though it actually is done loading. Also are you sure that you are fetching the data? like if you add console.log(data) in your fetch you see it loading?

There is also a hackish way of forcing a rerender by doing something like this

const [isRerender, setIsRerender] = React.useState(false)

then you would want to add something like this at the end of your api call

.finally(() => {setIsRerender(!isRerender)})

I do NOT recommend this but I have used it before and it is a possibility. But this should really be last resort type of thing because your code should be working.

If any of my code is confusing or does not make sense, let me know and I'll explain in more depth.

Source Link

I would change your code to something like this

const [arr, setArr] = React.useState([]);
const [dataLoaded, setDataLoaded] = React.useState(false);
useEffect(() => {
    axios.get('http://localhost:8000/get-data/')
    .then(res => {
        if (res.data) {
          const data = res.data
          const items = []
          data.forEach(item => items.push(item))
          setArr(items)
        }
    })
    .then(res => {
      //here remove the condition arr.length > 0
      //instead you should have conditional rendering in your app
      //so if the data is loaded display <>No Items Found</> or something
      setDataLoaded(true)
    })
}, [])

the reason you want to remove the conditional setDataLoaded(true) is because what if you fetch and the fetch returns [], then your dataLoaded is false even though it actually is done loading. Also are you sure that you are fetching the data? like if you add console.log(data) in your fetch you see it loading?

If any of my code is confusing or does not make sense, let me know and I'll explain in more depth.