PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

[FIXED] why is my state not updating after axios request is resolved

 October 13, 2022     axios, reactjs     No comments   

Issue

Basically, I have defined a state called predictedCrop which is an array, however after the axios post request, I get back data from the backend and when I console.log that data, it shows however when I am setting the state nothing shows apart from an empty array.

This is the function

const [predictedCrop , setPredictedCrop] = useState([])


const getWeatherDetails = async() => {
        try {
            const response = await axios.get(`${API_ENDPOINT}lat=${latitude}&lon=${longitude}&exclude=hourly,daily&units=metric&appid=${API_KEY}`)
            console.log(response.data)
            
            //Send temp and humidity to backend for analysis
            const dataToSend = response.data
            const sentWeatherData = await axios.post("http://localhost:4000/analysis" , {
                data: dataToSend
            }).then((response) => {
                let dataObject = response.data;
                setPredictedCrop(dataObject)
                console.log(predictedCrop)
            })

        } catch {
            console.log("error")
        }
    }

I am certain that the data is reaching the frontend as when i console.log(data.response) I get the data back. I have also tried assigning a normal variable to it and console.log that variable and the data shows, It is only when I place it in the state that it does not work.


Solution

Make the GET request when the page renders . so use the useEffect hook to call your function getWeatherDetails when the component mounts .

try it like this :

useEffect(() => {
   const getWeatherDetails = async() => {
        try {
            const response = await axios.get(`${API_ENDPOINT}lat=${latitude}&lon=${longitude}&exclude=hourly,daily&units=metric&appid=${API_KEY}`)
            console.log(response.data)
            
            //Send temp and humidity to backend for analysis
            const dataToSend = response.data
            const sentWeatherData = await axios.post("http://localhost:4000/analysis" , {
                data: dataToSend
            }).then((response) => {
                let dataObject = response.data;
                setPredictedCrop(dataObject)
                console.log(predictedCrop)
            })

        } catch {
            console.log("error")
        }
    }
}, []);


Answered By - monim
Answer Checked By - Katrina (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing