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

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)