![](/img/trans.png)
[英]Eslint React Hooks Error: eslint-plugin-react-hooks exhaustive deps warning for a function dependency in useEffect
[英]How to prevent useCallback from triggering when using with useEffect (and comply with eslint-plugin-react-hooks)?
我有一个用例,其中页面必须在第一次呈现和单击按钮时调用相同的提取 function。
代码类似于以下内容(参考: https://stackblitz.com/edit/stackoverflow-question-bink-62951987?file=index.tsx ):
import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
import { fetchBackend } from './fetchBackend';
const App: FunctionComponent = () => {
const [selected, setSelected] = useState<string>('a');
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<boolean>(false);
const [data, setData] = useState<string | undefined>(undefined);
const query = useCallback(async () => {
setLoading(true)
try {
const res = await fetchBackend(selected);
setData(res);
setError(false);
} catch (e) {
setError(true);
} finally {
setLoading(false);
}
}, [])
useEffect(() => {
query();
}, [query])
return (
<div>
<select onChange={e => setSelected(e.target.value)} value={selected}>
<option value="a">a</option>
<option value="b">b</option>
</select>
<div>
<button onClick={query}>Query</button>
</div>
<br />
{loading ? <div>Loading</div> : <div>{data}</div>}
{error && <div>Error</div>}
</div>
)
}
export default App;
我的问题是 fetch function 总是在任何输入更改时触发,因为eslint-plugin-react-hooks
强制我在useCallback
挂钩中声明所有依赖项(例如:选定状态)。 而且我必须使用useCallback
才能将其与useEffect
一起使用。
我知道我可以将 function 放在组件外部并传递所有 arguments(props、setLoading、setError 等)以使其工作,但我想知道是否可以在保持相同效果的同时存档在组件内部获取 function 并遵守eslint-plugin-react-hooks
?
[更新] 对于任何有兴趣查看工作示例的人。 这是从已接受的答案派生的更新代码。 https://stackblitz.com/edit/stackoverflow-question-bink-62951987-vxqtwm?file=index.tsx
像往常一样将所有依赖项添加到useCallback
,但不要在 useEffect 中创建另一个 function:
useEffect(query, [])
对于异步回调(如您的查询),您需要将旧式 promise 方式与.then
、 .catch
和.finally
回调一起使用,以便将 void function 传递给useCallback
,这是useEffect
所要求的。
另一种方法可以在React 的文档中找到,但根据文档不推荐使用。
毕竟,传递给useEffect
的内联函数无论如何都会在每次重新渲染时重新声明。 使用第一种方法,只有当查询的部门发生变化时,您才会传递新的 function。 警告也应该 go 消失。 ;)
有一些模型可以实现某些功能,您需要在安装组件和单击按钮/其他时调用fetch function 。 在这里,我为您带来另一个 model ,您可以通过仅使用钩子而不是直接基于按钮单击调用fetch function来实现两者。 它还将帮助您满足hook deps 数组的 eslint 规则,并轻松避免无限循环。 实际上,这将利用名为useEffect
和其他useState
的效果钩子的力量。 但是如果你有多个函数来获取不同的数据,那么你可以考虑很多选择,比如useReducer方法。 好吧,看看这个项目,我试图在其中实现与您想要的类似的东西。
https://codesandbox.io/s/fetch-data-in-react-hooks-23q1k?file=/src/App.js
export default function App() {
const [data, setDate] = React.useState("");
const [id, setId] = React.useState(1);
const [url, setUrl] = React.useState(
`https://jsonplaceholder.typicode.com/todos/${id}`
);
const [isLoading, setIsLoading] = React.useState(false);
React.useEffect(() => {
fetch(url)
.then(response => response.json())
.then(json => {
setDate(json);
setIsLoading(false);
});
}, [url]);
return (
<div className="App">
<h1>Fetch data from API in React Hooks</h1>
<input value={id} type="number" onChange={e => setId(e.target.value)} />
<button
onClick={() => {
setIsLoading(true);
setUrl(`https://jsonplaceholder.typicode.com/todos/${id}`);
}}
>
GO & FETCH
</button>
{isLoading ? (
<p>Loading</p>
) : (
<pre>
<code>{JSON.stringify(data, null, 2)}</code>
</pre>
)}
</div>
);
}
在这里,我使用初始链接在第一次渲染中获取数据,并且在每个按钮单击而不是调用任何方法时,我更新了效果挂钩 useEffect 的 deps 数组中存在的useEffect
,以便useEffect
再次运行。
我认为您可以轻松实现所需的行为
useEffect(() => {
query();
}, [data]) // Only re-run the effect if data changes
有关详细信息,请导航至此官方文档页面的末尾。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.