我有一个用例，其中页面必须在第一次渲染和单击按钮时调用相同的fetch函数。
代码类似于以下(参考：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函数总是在任何更改的输入上触发，因为eslint-plugin-react-hooks迫使我在useCallback钩子中声明所有依赖项(例如：选定状态(。我必须使用useCallback才能与useEffect一起使用。
我知道我可以将函数放在组件之外，并传递所有参数(props、setLoading、setError等(，以便实现这一点，但我想知道是否有可能在将fetch函数保留在组件内部并遵守eslint-plugin-react-hooks的同时归档相同的效果？
[更新]对于任何有兴趣查看工作示例的人。以下是从已接受的答案派生的更新代码。https://stackblitz.com/edit/stackoverflow-question-bink-62951987-vxqtwm?file=index.tsx
像往常一样将所有依赖项添加到useCallback，但不要使用另一个函数Effect:
useEffect(query, [])
对于异步回调(在您的案例中类似于查询(，您需要将旧式的promise方式与.then、.catch和.finally回调一起使用，以便将void函数传递给useCallback，这是useEffect所需要的。
另一种方法可以在React的文档中找到，但根据文档，不建议使用。
毕竟，传递给useEffect的内联函数无论如何都会在每次重新呈现时重新声明。使用第一种方法，只有当查询的deps发生变化时，您才会传递新函数。警告也应该消失。(
有一些模型需要在组件安装时调用获取函数，并在上单击按钮/其他按钮。在这里，我为您带来了另一个模型，在该模型中，您可以通过仅使用挂钩和不直接基于按钮点击调用获取函数来实现这两种功能。它还将帮助您满足钩子deps数组的esint规则，并轻松安全地处理无限循环。实际上，这将利用被称为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>
);
}
在这里，我使用初始链接在第一次渲染中获取了数据，在每次单击按钮时，我更新了效果挂钩的deps数组useEffect中存在的状态，而不是调用任何方法，以便useEffect再次运行。
我认为作为，您可以轻松地实现所需的行为
useEffect(() => {
query();
}, [data]) // Only re-run the effect if data changes
有关详细信息，请导航到此官方文档页面的末尾。