Refresh data through a new GET request - React Dropdown-CodePudding

I have this Dropdown Menu (done with MUI) which allows to choose the day value. When it changes, I'd like it to make a new GET request with the new parameter, but I don't know how to do it as it uses useEffect.

My function to fetch data

  const [loading, setLoading] = useState(true);
  const [prepData, setPrepData] = useState([]);
  const [day, setDay] = React.useState(3);

  console.log(day);

  
  const options=["J 1","J 2","J 3", "J 4"]
  
  const handleChange = (event) => {
    setDay(event.target.value);
  };

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);

      try {
        const {data: response} = await axios.get('/api/home?day='   day)
        setPrepData(response)
      } catch (err) {
        console.log(err.message)
      }
      setLoading(false)
    }
    
    fetchData()
  }, []);

My dropdown menu :

      <Box key={'box'   index} sx={{ minWidth: 120 }}>
        <FormControl key={'form'   index} fullWidth>
          <InputLabel key={'input'   index} id="dropdown">Date Liv.</InputLabel>
          <Select
            key={'select'   index}
            labelId="select-label"
            id="dateLiv"
            value={day}
            label="Date Liv."
            onChange={handleChange}
            type='submit'
          >
          {(options).map((option, index) => (
            <MenuItem key={'menuItem'   index} value={index   1}>{option}</MenuItem>
          ))}
          </Select>
        </FormControl>
      </Box>

CodePudding user response：

You can add day as dependency in useEffect. So that when day value is changed, automatically useEffect will be executed.

useEffect(() => {
    const fetchData = async () => {
      setLoading(true);

      try {
        const {data: response} = await axios.get('/api/home?day='   day)
        setPrepData(response)
      } catch (err) {
        console.log(err.message)
      }
      setLoading(false)
    }
    
    fetchData()
  }, [day]);   // added day as dependent property

CodePudding user response：

Add as a dependency:

 useEffect(() => {
    const fetchData = async () => {
      setLoading(true);

      try {
        const {data: response} = await axios.get('/api/home?day='   day)
        setPrepData(response)
      } catch (err) {
        console.log(err.message)
      }
      setLoading(false)
    }
    
    fetchData()
  }, [day]); // ------> here

CodePudding user response：

The useEffect you defined is triggered when your component is mounting for the first time cause you use the [] parameter at the end. But you can give any state var instead of it.

If you want to refresh the data each time your dropdown value change, you can declare another useEffect which is called as soon as your "day" state var changes. Do something like this :

useEffect(() => {
   // Action called
   fetchData(day)
}, [day])