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

Posted 2023-03-17

【中文标题】如何在 UseEffect 中使用自定义方法？

【英文标题】：How can I use custom method in UseEffect?

【发布时间】：2020-02-24 09:01:28

【问题描述】：

如何在 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)

【参考方案1】：

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

提取具有相同提取功能的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
    )

【讨论】：

谢谢！我没想过要创建自定义钩子。但是我有一个问题当组件将参数（id）提供给useFetch并且id是组件的状态时，如果id改变了如何重新运行useFetch？ useFetch 不应该在 useEffect 中吗？像这样：useEffect(()=>useFetch(id),[id]) ??是不是因为saveed on data和useEffect deps有数据？？

见rules of hooks。 useFetch 使用 useEffect ，它具有 id 作为依赖项。因此每次id 更改时都会重新运行获取，然后返回新数据。如果没有，它只会返回旧数据。

【参考方案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);

【讨论】：

感谢您的回答。但我有一个问题。如果 id 会被任何事件改变，我应该将 useFetch 移到 useEffect 中吗？ useEffect(()=>useFetch(id),[id]); ??

不，您不需要这样做，因为每当 id 更改时，useFetch 将在更新的渲染上使用新 id 调用，并且其中的 useEffect 将运行

感谢您的回答！！我已经解决了我所有的问题！我一定会擅长创建自定义钩子！谢谢！