在页面进入或刷新后，反应如何只运行一次函数

Question

我正在开发一个带有算法搜索的搜索函数。用户可以从不同的网站输入搜索词，然后重定向到搜索页面，并且应该调用搜索。

之后，要搜索更多内容，用户需要使用搜索页面，然后点击回车键再次调用搜索。

我尝试使用useState，并在第一次渲染后将其设置为true。然而，当我在搜索栏中键入时，每次按键都会调用useEffect。为什么在firstRender没有更改的情况下会发生这种情况？它会再次将firstRender设置为true，但由于firstRender已经为true，所以应该不会发生任何事情？

我怎么能"停用"；第一次渲染后的useEffect，以便用户只使用搜索栏进行搜索？

(我不想在用户打字时用请求来敲打API(

谢谢！

const SearchRecipes = () => {
const client = algoliasearch(process.env.REACT_APP_ALGOLIA_APP_ID, process.env.REACT_APP_ALGOLIA_SEARCH_API);
const index = client.initIndex('recipe_search');
const match = useRouteMatch();
const [searchTerm, setSearchTerm] = useState(match.params.id);
const [searchReturnData, setSearchReturnData] = useState([]);
const [firstRender, setFirstRender] = useState(false);
const useMountEffect = (fun) => useEffect(fun, [])

useEffect(() => {
handleSubmit();
setFirstRender(true);
}, [firstRender])
const handleSubmit = (e = null) => {
if (e !== null){
e.preventDefault();
}
index
.search(searchTerm)
.then((responses) => {
setSearchReturnData(responses.hits);
});
}
return (
// irrelevant JSX
<div className="keywords">
<input 
type="text" 
value={searchTerm}
onChange={({target}) => setSearchTerm(target.value)}
/>
</div>
// more irrelevant JSX
)
} 

Answer 1

原因是您的useEffect依赖于firstRender，并且在它内部设置该值。

您可以按照注释中的建议，使用一个空的依赖项数组：

useEffect(() => {
handleSubmit();
}, [])

或者检查您的firstRender状态是否已设置：

useEffect(() => {
if (!firstRender) {
handleSubmit();
setFirstRender(true);
}
}, [firstRender])

如果你需要更多信息，这是一篇关于useEffect的非常好的文章。