gpt4 book ai didi

reactjs - React hooks - 如何按需调用useEffect?

转载 作者:行者123 更新时间:2023-12-01 21:57:23 24 4
gpt4 key购买 nike

我正在用 React 钩子(Hook)重写一个 CRUD 表。下面的自定义 Hook useDataApi 用于获取表的数据,观察 url 变化 - 因此当参数变化时它会被触发。但我还需要在删除和编辑后获取最新的数据。我该怎么做?

const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl)

const [state, dispatch] = useReducer(dataFetchReducer, { data: initialData, loading: true })

useEffect(() => {
const fetchData = async () => {
dispatch({ type: 'FETCH_INIT' })
const result = await instance.get(url)
dispatch({ type: 'FETCH_SUCCESS', payload: result.data })
}

fetchData()
}, [url])

const doFetch = url => {
setUrl(url)
}

return { ...state, doFetch }
}

由于 url 在删除/编辑后保持不变,因此不会被触发。我想我可以有一个增量标志,并让 useEffect 也监视它。但这可能不是最佳做法?有没有更好的办法?

最佳答案

您需要做的就是从useEffect 中取出fetchData 方法,并在需要时调用它。还要确保将函数作为依赖项数组中的参数传递。

const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl)

const [state, dispatch] = useReducer(dataFetchReducer, { data: initialData, loading: true })

const fetchData = useCallback(async () => {
dispatch({ type: 'FETCH_INIT' })
const result = await instance.get(url)
dispatch({ type: 'FETCH_SUCCESS', payload: result.data })
}, [url]);

useEffect(() => {
fetchData()
}, [url, fetchData]); // Pass fetchData as param to dependency array

const doFetch = url => {
setUrl(url)
}

return { ...state, doFetch, fetchData }
}

关于reactjs - React hooks - 如何按需调用useEffect?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55826190/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com