Reactjs 单击按钮时调用useEffect

这里有没有重构代码的方法：

    useEffect(async() => {
        const response = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/user/usergroup', {withCredentials:true})
        setUserData(response.data) 
     }, [])


    const groupFilter = async(groupid) => {
        const response = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/user/usergroupfilter', {id:groupid}, {withCredentials:true})
        setUserData(response.data)
    }


  const loadAll = async(e) => {
        e.preventDefault()
        const response = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/user/usergroup', {withCredentials:true})
        setUserData(response.data) 
      }
  

在初始加载时，页面将加载所有用户，而不管他们属于哪个组。该页面有一些按钮，单击这些按钮时，将调用groupFilter函数并显示用户属于该组

---

我还有一个名为All的按钮，当单击loadAll函数时，它将加载所有用户，代码与useEffect相同。我在想，有没有一种方法可以将useEffect和loadAll合并为一个整体，这样我就不会有重复的代码？或者，有没有一种方法可以在“全部”按钮单击时调用useEffect？非常感谢您的帮助，并提前表示感谢。

您可以创建一个自定义挂钩，并随时调用它

 import {useEffect, useState} from 'react';  
    
    export default function useUSerData() {
        const [data,setData] = useState([]);
    
        useEffect(async() => {
            const response = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/user/usergroup', {withCredentials:true})
            setData(response.data) 
         }, [])
    
         return data; 
    }
          
        
        
        useEffect(async() => {
            setUserData(useUSerData()) 
         }, [])
    
    
        const groupFilter = async(groupid) => {
            const response = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/user/usergroupfilter', {id:groupid}, {withCredentials:true})
            setUserData(response.data)
        }
    
    
      const loadAll = async(e) => {
            e.preventDefault()
            setUserData(useUSerData()) 
          }
      

---

您可以创建一个自定义挂钩，并在需要时调用它

 import {useEffect, useState} from 'react';  
    
    export default function useUSerData() {
        const [data,setData] = useState([]);
    
        useEffect(async() => {
            const response = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/user/usergroup', {withCredentials:true})
            setData(response.data) 
         }, [])
    
         return data; 
    }
          
        
        
        useEffect(async() => {
            setUserData(useUSerData()) 
         }, [])
    
    
        const groupFilter = async(groupid) => {
            const response = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/user/usergroupfilter', {id:groupid}, {withCredentials:true})
            setUserData(response.data)
        }
    
    
      const loadAll = async(e) => {
            e.preventDefault()
            setUserData(useUSerData()) 
          }
      

const fetchAll=React.useCallback（async（）=>{
const response=wait Axios.post（process.env.REACT_APP_FETCH_URL+'/api/user/usergroup'{
证书：正确
})
setUserData（response.data）
}, [])
useEffect（异步（）=>{
等待fetchAll（）
}，[fetchAll]）

const fetchAll=React.useCallback（async（）=>{
const response=wait Axios.post（process.env.REACT_APP_FETCH_URL+'/api/user/usergroup'{
证书：正确
})
setUserData（response.data）
}, [])
useEffect（异步（）=>{
等待fetchAll（）
}，[fetchAll]）

将post和setState代码包装在一个函数中，并从两个位置调用它？将post和setState代码包装在一个函数中，并从两个位置调用它？嗨，凯文，非常感谢。嗨，凯文，非常感谢。