React Useeffect在页面加载时运行
我在react功能组件中使用useEffect从外部API获取数据，但它在页面上呈现时一直调用API端点。我正在寻找一种方法来停止在组件上渲染时运行useeffect
回答 3
Stack Overflow用户
发布于 2021-05-20 22:24:32
useEffect总是在DOM中的所有更改或渲染效果更新后运行。它不会在更新DOM时或之前运行。您可能没有将第二个参数提供给useEffect，如果您不提供该参数，将导致useEffect在每次更改时执行。假设您只想在第一次渲染后打开时调用API一次，那么您应该提供一个空数组。
在所有更新上运行，请参见 useEffect**:**的第二个参数
useEffect(() => { /* call API */ });当属性或状态发生变化时，会运行，请参见第二个参数：
useEffect(() => { /* call API */ }, [prop, state]);只运行一次，请参见第二个空参数：
useEffect(() => { /* call API */ }, []);Stack Overflow用户
发布于 2021-05-20 22:34:28
使用依赖项数组(useEffect的第二个参数)，这样就可以指定何时需要运行useEffect。
这里的问题是您没有使用依赖数组，所以它每次都会执行。通过添加依赖项数组，您可以指定希望useEffect运行的更改位置。
useEffect(()=>{
},[<dependency array: which contains the properties>]);如果将依赖项数组保留为空，它将只运行一次。因此，如果您希望API调用只运行一次，请向useEffect添加一个空数组作为第二个参数。这就是你的解决方案。
如下所示：
useEffect(()=>{
//Your API Call
},[]);Stack Overflow用户
发布于 2021-05-20 22:37:29
我建议您阅读有关React useEffect hook的完整文档。
下面是一个使用useEffect的简单示例
function functionalComponent() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
const url = 'https://randomuser.me/api/?results=10';
fetch(url)
.then(data => {
setData(data);
})
.catch(error => console.error(error))
}, []); // it's necessary to use [] to avoid the re-rendering
return <React.Fragment>
{data !== null && (
<React.Fragment>
{data.results.map(data => (
<div>
{data.gender}
</div>
))}
</React.Fragment>
)}
</React.Fragment>;
}也许在你的useEffect实现中，你在避免[]依赖，如果你来自类状态，这是很难理解的。当钩子中的状态元素改变时，这在钩子上进行检查，例如，如果你使用的元素总是像通过另一个组件传递的道具一样变化，你可能会在依赖项或另一个状态中设置，如果你不需要任何依赖项，就像上面的例子一样使用它为空。正如您在文档中看到的，有时不使用依赖项，这可能会产生无限循环。
https://stackoverflow.com/questions/67622119
复制相似问题
腾讯云开发者
