通过新的 GET 请求刷新数据 - React Dropdown

Question

我有这个下拉菜单（使用 MUI 完成），它允许选择日期值。当它改变时，我希望它用新参数发出一个新的 GET 请求，但我不知道该怎么做，因为它使用 useEffect。

我获取数据的函数

  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()
  }, []);

我的下拉菜单：

      <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>

Answer 1

添加为依赖：

 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

Answer 2

您可以将 day 添加为 useEffect 中的依赖项。这样，当日值更改时，将自动执行 useEffect。

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

Answer 3

你定义的useEffect是在你的组件第一次挂载时触发的，因为你最后使用了[]参数。但是你可以给任何状态变量来代替它。

如果您想在每次下拉值更改时刷新数据，您可以声明另一个 useEffect，它会在您的“day”状态变量更改时立即调用。做这样的事情：

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

通过新的 GET 请求刷新数据 - React Dropdown

Refresh data through a new GET request - React Dropdown

javascript

api

reactjs

axios