+ 1

how to get rigid of compile warning React Hook useEffect has missing dependencies: 'city' and 'country'. Either include them

import React from "react"; import {useEffect, useState} from 'react'; import {Box, TextField, Button, makeStyles} from '@material-ui/core'; import {getData} from '../service/api.js'; import Information from './information.jsx' const useStyles= makeStyles({ component:{ padding:20, backgroundColor:'rgba(31, 100, 128)' }, input:{ color:'white', marginRight:15, marginLeft:15, }, button:{ width:100, height:40, marginLeft:10, marginTop:5, borderRadius:60, backgroundColor:'rgba(41, 43, 46,0.6)' } }) const Form= ()=> { const classes=useStyles(); const [data,getWeatherData]=useState(); const [city, setCity]=useState(''); const [country, setCountry]=useState(''); const [click, handleClick]=useState(false); useEffect(()=>{ const getWeather=async()=>{ city && await getData(city,country).then(response =>{ getWeatherData(response.data); console.log(response.data) } ) } getWeather(); handleClick(false); },[click]); const handleCityChange=(value)=>{ setCity(value); } const handleCountryChange=(value)=>{ setCountry(value); } return ( <React.Fragment> <Box className={classes.component}> <TextField label="Enter Your City" onChange={(e)=>handleCityChange(e.target.value)} inputProps={{className:classes.input}} InputLabelProps={{ style: { color: 'rgba(184, 191, 194)' , fontSize:'13', paddingBottom:5}, }} className={classes.input} /> <TextField id="standard-basic" label="Enter Your Country" onChange={(e)=>handleCountryChange(e.target.value)} inputProps={{className:classes.input}} InputLabelProps={{ style: { color: 'rgba(184, 191, 194)', fontSize:'13', paddingBottom:5 }, }}/> <Button variant="outlined" onClick={(

14th Jun 2021, 2:37 PM
Shweta
Shweta - avatar
5 Réponses
+ 4
Since your making api request i suggest you use axios. Example const Form = async ({city, country}) => { const [data, setData] = useState(null); useEffect(() => { const res = await axios.get('/url', {city, country}); setData(res) }, [city]); }
14th Jun 2021, 4:53 PM
Apongpoh Gilbert
Apongpoh Gilbert - avatar
+ 4
Shweta I tried to regenerate your app, hopefully can give you some hints so can solve your issues later, check it out. https://code.sololearn.com/W8h7EJl5AU4S/?ref=app
15th Jun 2021, 2:24 PM
Calviղ
Calviղ - avatar
+ 4
Thank you to both of you. You both helped me alot the code is working fine now☺️ Apongpoh Gilbert Calviղ
15th Jun 2021, 2:31 PM
Shweta
Shweta - avatar
+ 2
install the dependency city and country
14th Jun 2021, 4:19 PM
Apongpoh Gilbert
Apongpoh Gilbert - avatar
+ 2
useEffect is relying on the {city, country} variable to make the API request. When the component re-renders, the value of {city, country} inside the useEffect could potentially be out of date. Since the effect has only run once, it will only have the value of {city, country} at the very first render.
14th Jun 2021, 4:36 PM
Apongpoh Gilbert
Apongpoh Gilbert - avatar