Question

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

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

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

Answer 1

您可以使用useRef或useMemo来存储值。

请参见https://stackoverflow.com/a/54963730/9351632

Answer 2

您可以使用.Include()钩子来记住第一次渲染时useRef的值。这样可以解决您的props.fetchSomething

问题

eslint

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

Answer 3

我同意您的观点，useRef是一种棘手的解决方案，会增加不必要的复杂性。老实说，我发现的最佳解决方案是在useEffect（）中使用条件式

function myComponent(props) {
    const { fetchSomething } = props;
    const [fetched, setFetched] = useState(false)
    ...
    ...
    useEffect(() => {
       if(!fetched) {
        fetchSomething();
        setFetched(true)
       }
    }, [fetched, fetchSomething]);
    ...
    ...
}

正确使用useEffect挂钩是一个非常复杂的主题。您可以阅读这篇很长的文章

https://overreacted.io/a-complete-guide-to-useeffect/

useEffect还是一个相当新的事物，因此仍然存在一些相互竞争的最佳实践。我不会推荐useRef tho。

React钩子警告我缺少依赖项

3 个答案: