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

Question

如何在useEffect中使用自定义方法？？如果我创建了许多组件并且它们使用相同的获取功能，我应该在每个组件的效果中声明获取功能吗？该功能同样有效??

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

但是我想在其他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

Shoud I declare fetch function in every component's effect?

提取具有相同提取功能的 custom hook、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);
}

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

How can I use custom method in UseEffect?

reactjs

react-redux

react-hooks

use-effect