如何在UseEffect中使用自定义方法

Question

如何在useEffect中使用自定义方法？？如果我创建了许多组件，并且它们使用相同的fetch函数，我是否应该在每个组件的效果中声明fetch函数？？这个函数做同样的工作？？

据我所知，如果我想在useEffect中使用组件的状态，我应该声明并调用useEffect(如示例1(中的函数。

但是我想把函数声明为其他js文件。因为它被称为其他组件。

根据Dan Abramov(https://overreacted.io/a-complete-guide-to-useeffect/)，如果我想移动函数，我必须使用useCallback方法。但我不太理解。请在这个问题上给我一些建议。

1. Component.js
const Component = () => {
const [id,setId] = useState(0);
const dispatch = useDispatch();
useEffect(() => {
fetch(`url/${id}`).then(res => dispatch({type: success, payload: res}))
},[id])
}
2. Component.js 
const Component = () => {
const [id, setId] = useState(0);
useEffect(()=> {
callApi(id)
},[id])
}
Api.js
const callApi = (id) => {
const dispatch = useDispatch();
return fetch(`url/${id}`).then(res => dispatch({type:success, payload:res})
}

Answer 1

我应该在每个组件的效果中声明fetch函数吗？

使用相同的提取功能提取自定义挂钩useFetch()。

// custom hook
const useFetch = (id) => {
const [data, setData] = useState(null);
useEffect(
() => {
async function fetchData() {
const res = await fetch(`url/${id})
setData(res);
}
fetchData();
}, [id] // id as dependency
)
return data;
}
// sample component using custom hook
const Component = (props) => {
const dispatch = useDispatch();
const data = useFetch(props.id); // use custom hook
useEffect(
() => {
if (data) {
dispatch({type: success, payload: data});
}
}, [data] // dispatch every time data changes
)
}

Answer 2

由于您的多个组件在useEffect中执行相同的操作，因此您可以将代码提取到自定义挂钩中，并在所有组件中使用它

useFetch.js

export const useFetch = () => {
const dispatch = useDispatch();
useEffect(() => {
fetch(`url/${id}).then(res => dispatch({type: success, payload: res}))
},[id])
}

现在在组件中，您可以编写

const Component = () => {
const [id, setId] = useState(0);
useFetch(id);
}