javascript - React钩子(Hook)警告我缺少依赖项

假设我使用useEffect在初始渲染时预取数据：

function myComponent(props) {
    const { fetchSomething } = props;
    ...
    ...
    useEffect(() => {
        fetchSomething();
    }, []);
    ...
    ...
}

我的linter警告我“ React Hook useCallback缺少依赖项”。它希望我将fetchSomething放入依赖项数组中。
问题是，即使fetchSomething也要更改，我也不希望组件重新获取数据。正如我所看到的，在大多数情况下useEffect使用函数时，它实际上并不关心函数是否被更改。
我不想关闭该警告，也不想在整个代码中散布// eslint-disable-next-line react-hooks/exhaustive-deps。
这种行为背后的理性是什么？
这使我在使用钩子时感到不安全，就好像我做错了什么一样。

最佳答案

您可以使用useRef挂钩来记住第一次渲染时props.fetchSomething的值。这将解决您与eslint有关的问题

function myComponent(props) {
    const fetchSomethingRef = useRef(props.fetchSomething);

    useEffect(() => {
        fetchSomethingRef.current();
    }, []);
}

  useRef（）钩不仅用于DOM引用。 “ ref”对象是一个通用容器，其当前属性是可变的，并且可以保存任何值，类似于类的实例属性。 more