React-bootstrap表格执行axios更新请求后未自动刷新问题

问题根因 #

你修改数据成功后执行setHeatsUrl('/heats')，但heatsUrl的初始值就是/heats，前后状态值完全一致，React不会触发状态更新，自然也不会触发useAxios内部依赖url的useEffect重新发起GET请求拉取最新列表。

修复方案 #

第一步：改造useAxios自定义Hook，新增刷新触发参数 #

给Hook增加refetchTrigger依赖项，通过变更该参数值即可主动触发请求重发，同时补充重新请求时的loading状态重置逻辑：

export const useAxios = (url, method, data, refetchTrigger = 0) => {
    const [responseData, setResponseData] = useState(undefined)
    const [status, setStatus] = useState(undefined)
    const [error, setError] = useState('')
    const [loading, setLoading] = useState(true)

    const params = {
        method: method,
        url: url,
        headers: { accept: '*/*' },
        data: data,
    }

    const fetchData = async (params) => {
        // 重发请求前重置状态
        setLoading(true)
        setError('')
        try {
            const result = await axios.request(params)
            setResponseData(result.data)
            setStatus(result.status)
        } catch (error) {
            setError(error.response)
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        if (!url) return
        fetchData(params)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [url, refetchTrigger]) // 新增refetchTrigger作为依赖项
    return { responseData, error, loading, status }
}

第二步：修改列表组件逻辑 #

1. 新增刷新触发状态，调用useAxios时传入该状态：

const HeatList = () => {
const [heatsUrl, setHeatsUrl] = useState('/heats')
const [refetchHeats, setRefetchHeats] = useState(0) // 新增刷新触发状态
// ...其他原有状态

// 调用useAxios时传入refetchHeats参数
const {
    responseData: heats,
    loading: heatsIsLoading,
    error: heatsIsError,
} = useAxios(heatsUrl, 'GET', null, refetchHeats)
// ...其他原有useAxios调用

2. 修改更新成功后的逻辑，通过变更refetchHeats触发列表刷新，同时重置editUrl避免重复触发更新逻辑：

useEffect(() => {
    if (editResponse && activeHeat.idHeat === editResponse.idHeat) {
        setActiveHeat(editResponse)
        toastSuccess(SAVE_SUCCESS)
        setRefetchHeats(prev => prev + 1) // 累加值触发刷新
        setEditUrl('') // 重置编辑请求url
    } else if (editResponse === '') {
        toastError(SAVE_ERROR)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [editResponse])
// ...其他原有逻辑

补充优化建议 #

你当前封装的useAxios默认挂载就自动发起请求，更适合查询类场景；PUT/POST这类修改类请求建议单独封装成返回手动调用函数的Hook，避免因url、data变更意外触发重复请求。

内容的提问来源于stack exchange，提问作者ben871