React useEffect调用API的次数太多了，当我的组件呈现时，我如何才能将API调用限制在只有一次？
要将React useEffect调用API的次数限制在只有一次，可以使用一个状态变量来控制API调用的触发时机。具体步骤如下：
- 在组件的函数体内部定义一个状态变量，用于标记API是否已经被调用过。可以使用useState钩子函数来创建这个状态变量，初始值设为false。
const [apiCalled, setApiCalled] = useState(false);- 在useEffect钩子函数中添加一个条件判断，只有当apiCalled为false时才执行API调用的逻辑。在API调用完成后，将apiCalled设置为true，表示API已经被调用过。
useEffect(() => {
if (!apiCalled) {
// 执行API调用的逻辑
// ...
// 设置apiCalled为true，表示API已经被调用过
setApiCalled(true);
}
}, []);- 将useEffect的第二个参数设置为空数组，这样useEffect只会在组件挂载时执行一次，不会受到其他状态变化的影响。
useEffect(() => {
// ...
}, []);通过以上步骤，可以确保API调用只会在组件挂载时执行一次，避免重复调用API的问题。
对于React的useEffect和useState钩子函数，可以参考腾讯云的React开发文档，了解更多相关信息和示例代码：React开发文档
相关·内容
useEffect(() => {
getQuestionDetails();
getAnswers();
}, []);
我在一个react函数组件中使用上面的useEffect钩子，我调用异步函数，该函数使用axios从服务器获取数据。我在axios的http请求中使用上下文API中的一些状态值作为有效负载。对于第一个呈现，我正确地从上下文中获取状态值，但在此之后，值是不正确的。不仅useEffect内部的函数，而且useEffect之外的另一个函数也无法得到正确的状态值。
这是从上下文API获取一些有效负载值的第一次呈现：
这是在我重新加载同一页面之后，我
浏览 3提问于2022-11-30得票数 0
在我调用了Facebook的图形API之后，我得到了这样的错误：
{"error":{"message":"(#17) User request limit reached","type":"OAuthException","code":17}}
浏览 9提问于2015-01-09得票数 6
1回答
你好，我有一个无限循环的问题。我看过的所有示例都会让循环消失。但是如果我不刷新，它就不会更新我的视图。我希望项目出现时，添加了一些东西。我以为我的例子会起作用，但它不是。我不知道该怎么修 const [ReadBookingTimes, SetBookingTimes] = useState([]);
const [readStatus, setStatus] = useState("");
const getBookingTimes = async () => {
try {
浏览 17提问于2020-11-22得票数 1
回答已采纳
因此，我创建了一个需要在页面视图上触发的自定义钩子
所以我想我可以在useEffect里面调用这个钩子，但这看起来不可能
有人知道我是怎么做到的吗？
一旦我启动它，它就会触发Google，所以它必须装载。这个是可能的吗？
好的，这里有一个例子
export const usePageView = props => {
const counter = useSelector(state => state) // useSelector coming from react redux
console.log(counter, '===')
}
impo
浏览 1提问于2020-03-12得票数 0
在没有依赖项的useEffect内部的代码与简单的useEffect之外的代码之间，我遇到了麻烦。
例如，一个简单的例子：
const func1 = () => {
console.log("Apple")
useEffect(() => {
console.log("Banana")
})
return (//...JSX)
}
我相信Apple和Banana在重呈现时都会被调用，那么为什么要使用useEffect呢？
我听到的标准答案是，每次重呈现时都会调用Apple，但只有在状态/支柱发生变化时才会调用Ban
浏览 4提问于2019-12-12得票数 6
回答已采纳
3回答
我要做的是从天气API中获取数据，但是在第一个呈现时，' data‘状态为空，在第二个呈现时，调用API并设置数据。因此，当我稍后试图访问图像的数据时，我会得到一个错误，TypeError: Cannot read property 'weather' of undefined，因为它最初是空的。不知何故，我需要跟踪呈现发生的次数，或者更改获取数据的方式。我认为以空列表作为第二个参数的useEffect将充当componentDidMount。这是我的代码：
import React, {useState, useEffect} from 'react'
浏览 5提问于2020-05-13得票数 1
回答已采纳
2回答
取自
不要在循环、条件或嵌套函数中调用钩子。
考虑到react的这一建议，在呈现道具函数的顶部使用钩子是否不可取？假设它依赖于函数返回的值。
const MyComponent = () => (
<RenderPropComponent>
{value => {
React.useEffect(() => {
// Magic
}, [value]);
return <p>Hello</p>;
浏览 0提问于2019-03-21得票数 11
回答已采纳
我在react功能组件中使用useEffect从外部API获取数据，但它在页面上呈现时一直调用API端点。我正在寻找一种方法来停止在组件上渲染时运行useeffect
浏览 0提问于2021-05-20得票数 0
const Messages = (props) => {
const [messages, setMessages] = useState([]);
const { currentChannel, currentUser } = props;
const messagesRef = firebase.database().ref("messages");
useEffect(() => {
if (currentChannel && currentUser) {
浏览 3提问于2021-03-13得票数 0
回答已采纳
我正在寻找有关承诺链是否保证在被垃圾收集之前完成的信息，如果引用丢失了。我正在React钩子中执行对API的调用，但不清楚如果某个依赖项发生了变化，而useEffect钩子在承诺尚未兑现时被重新执行，会发生什么情况。
--一个人为的例子：
const useApiFetch = (query, myVariable) => {
const client = useClient();
useEffect(()=>{
client
.query(query)
.then(() => console.log('inside then
浏览 3提问于2021-02-20得票数 1
如果它喜欢硬代码，它就能工作：
<Cascader
defaultValue={["County"]}
className="custom_select"
expandTrigger="hover"
options={options_3}
onChange={onChange}
placeholder="Please select"
changeOnSelect
disabled={true}
浏览 2提问于2020-02-20得票数 0
回答已采纳
我有两个反应功能组件: a) ParentComponent b) ChildComponent：
我从ParrentComponent打电话给ParrentComponent。在我的ChildComponent中，我调用API来获取数据(比方说过滤公共数据)，现在每当我从父母那里调用ChildComponent时，我在ChildComponent中的API就会被调用。但是，我只希望这些API第一次调用，然后希望将API响应数据用于其他rendors。
我使用了useEffect，useCallback，但似乎我无法使它工作。
浏览 4提问于2022-02-24得票数 0
回答已采纳
我的组件中有一个useEffect钩子，它进行API调用，我希望它只在第一次呈现时运行。但我无法调用API。我在这里错过了什么？
useEffect(() => {
//should run on first render
(async () => {
const getAllSeasons = await getSeasonList();
setSeasons(getAllSeasons);
})();
}, []);
const getSeasonList = async () => {
if (sta
浏览 8提问于2022-03-16得票数 -4
我有带标签的页面。
{
path: '/settings/monitoring/:tab',
component: MonitoringPage,
exact: true,
type: PRIVATE_TYPE,
},
还有useEffect，它为所有选项卡获取数据。有一个函数，它改变选项卡：
const onChangeTab = (tabName) => {
const tab = findTab(tabName)
props.history.push(tab.settings.name, null)
setSettings(tab.set
浏览 0提问于2022-08-31得票数 -1
我试图使用openathermap.org的免费API将用户的本地天气添加到我的站点中。API调用有效；我想要返回。但是，它不停地调用API数百次。我在获取要在浏览器中呈现的数据时也遇到了问题，我认为这是一个异步Javascript问题。我尝试过移动触发fetch调用的函数，将其放入useEffect()中，使用setTimeout()，但没有任何工作。当它在useEffect()中时，我收到一个错误，指向在获取调用中读取‘纬度’的问题。
那么我该如何解决这些问题呢？是否有办法在useState()中存储纬度和经度？
提取调用
export const getWeather = (coords
浏览 4提问于2022-08-19得票数 0
回答已采纳
我是新来的反应和反应本地人。试图构建一个简单的应用程序，在按下按钮时执行API调用。
我下面的代码起作用了，但在我看来并不是“正确的”。useEffect()是在页面加载之后运行的？好像跑了好几次。我将按钮点击数为真，然后在useEffect中有一个if语句。这是否意味着应用程序不断检查按钮是否被按下？
我尝试将useEffect()放入getJoke()函数中，但本机不喜欢它。“无效的钩子调用。钩子只能在函数组件的主体内调用。”
如果我将getJoke()放在useEffect()中，它就会不断地调用api。我喷射api响应一个接一个响应。
--我只想按下一个按钮就会产生一个API调用，如果
浏览 8提问于2021-08-31得票数 1
回答已采纳
5回答
如果我想在组件的第一次呈现之后调用API，我知道我们有useEffect钩子来调用API方法。(我说的只是功能部件。没有类组件)。
有没有办法在组件第一次呈现之前调用API。
这个问题的原因是，如果某些UI部件依赖于API，我不希望在第一次呈现时向用户显示任何不完整的信息，一旦从API获得数据，就会更改这些信息。这似乎是一次糟糕的UI体验。
编辑：，我收到了一些建议，可以使用useLayoutEffect或任何可消费标志来检查它是否呈现。我已经检查了useLayoutEffect不工作，通过使用易耗标志，我们只会增加复杂性。
我们有什么更好的办法吗？
浏览 1提问于2020-04-20得票数 5
我知道同样的问题可能被问了好几次。但我找不到我要找的答案。
这是任务的代码：
import Navbar from './Navbar';
import "./Idea.css";
import GetData from '../restApiMethods/GetData';
import React from "react";
function Task() {
const ids = GetData("ideas/id");
return (
<div>
浏览 11提问于2022-10-28得票数 0
回答已采纳
我正在用搜索条实现无限滚动。因此，每次调用API时，我需要带10个条目，将页面编号增加1。
在调用子组件中的‘useState’函数之前，我使用了pageNumber并调用了setPageNum。问题是，它总是初始化为1，并且返回相同的状态，只有2。
我已经尝试了5小时左右的每一条路，但都被堵住了。我做错了什么，我怎么才能解决这个问题？
const InputTodo = ({ setTodos }) => {
const [inputText, setInputText] = useState("");
const [suggestionList, setSug
浏览 8提问于2022-07-27得票数 0
如果单击来自不同组件的<MeetNew>组件中的链接，则呈现良好，但当从<User>组件单击<MeetNew> Link时，页面无法正确加载。
关于组件
const User = () => {
let { id } = useParams()
let res2;
const [userInfo, setUserInfo] = useState({
user: {},
listItems: []
})
const { listItems } = userInfo
useEffect(() => asyn
浏览 4提问于2022-09-06得票数 1
3回答
我的目标是获取API，并在组件挂载时对数据执行一些逻辑操作。我创建了另一个useEffect，仅在第一次获取调用成功时才运行。我能够获得我所有的数据，但我得到的错误是“无法读取属性‘长度’的null”。如果我正确理解，第二个useEffect将在companyData更改时运行。
错误：
54 | useEffect(() => {
55 | async function organizeReviews() {
56 | let companyReviews = []
> 57 | for(let i = 0; i < companyData
浏览 1提问于2020-04-10得票数 0
回答已采纳
我正在提取一个带有onRes参数的自定义钩子；
function useApi(onRes) {
useEffect(() => {
api().then((res) => {
onRes && onRes(res);
});
}, [onRes]);
}
要使用此挂钩，请执行以下操作：
import useApi from './useApi';
function App() {
const [x, setX] = useState(0);
useApi({
onRes: () => {}
浏览 17提问于2019-07-15得票数 0
查看官方的，给出了一个编写自定义钩子的示例，如下所示：
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
retur
浏览 3提问于2021-01-31得票数 1
回答已采纳
当我们需要通过api和redux在react中使用redux时，我们使用redux-thunk或saga，但我的问题是，通过组件useEffect钩子也是可能的，我们在useEffect中调用api，然后在redux存储中使用action传递数据。
浏览 24提问于2021-10-05得票数 0
我是这个Heroku的新手，我不确定Heroku是否适合我的要求:我的要求：
我制作了一个非常基本的Python应用程序--它读取google电子表格并将结果存储在数据库中。，我做了另一个基本的RESTful API，它将被调用以获得由Python应用程序.计算的结果。
我的问题：
可以在Heroku上免费托管RESTful API吗？我每月调用API的次数将少于10次。是否支持我使用数据库存储5-10列的大约5000条记录？
浏览 8提问于2020-12-16得票数 0
回答已采纳
Graphql提供useQuery钩子来获取数据。当组件重新呈现时，它将被调用。
//mocking useQuery hook of graphql, which updates the data variable
const data = useQuery(false);
我正在使用useEffect钩子来控制应该调用"useQuery“多少次。
我想要做的是，每当我从"stateOfValue“接收数据时，我想对数据执行一些操作，并将其设置为另一个状态变量useQuery，这是一个嵌套的对象数据。因此，这必须在useEffect挂钩内完成。
因此，我需要将我的stat
浏览 2提问于2020-06-22得票数 0
回答已采纳
2回答
这是我的密码
// App.js
import { useState } from "react";
import Child from "./Child";
export default function App() {
const [value, setValue] = useState(0);
const [isInvalid, setIsInvalid] = useState(false);
const handleChange = (e) => setValue(e.currentTarget.value);
const ha
浏览 5提问于2022-08-18得票数 1
回答已采纳
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { useGlobalContext } from "../context";
const SingleTvShow = () => {
const { id } = useParams();
const [details, setDetails] = useState({});
const { imgUrl } = u
浏览 8提问于2021-06-13得票数 1
回答已采纳
3回答
我想在初始加载页面时添加一个进行API调用的文本框。
两个控制台日志都能够打印出结果，但是在呈现过程中，它变为NULL，我猜想它是在API调用之前呈现的，我应该如何在它首先呈现之前先等待axios调用？
const [myAddr, getAddr] = useState(null);
useEffect(() => {
const grabAddress = async () => {
const url = "http://localhost:5001/getAddress";
try {
const resp
浏览 11提问于2022-08-31得票数 0
回答已采纳
如果将空数组作为依赖项传递，我们可以使用useEffect一次调用函数，但也可以使用调用函数而不使用钩子，只需调用它即可。
我试图搜索只在第一次呈现时调用函数的更好方法，但我只能找到建议在空数组中使用useEffect的帖子。但是为什么呢？这更传统吗？
更好的方法是什么?为什么？
我想我问错问题了。第一次很抱歉。我的问题更像这样。
我们可以调用body中的函数，这样就可以用于每次渲染。我知道，如果我们不建议第二个参数，即依赖项，那么它将调用对每个工作的呈现。但是使用“useEffect”有什么好处呢？我们可以通过调用useEffect和body来实现相同的目标。
浏览 4提问于2021-02-19得票数 0
回答已采纳
React正在发出警告：
'someUnchangingArray‘数组使useEffect Hook (第42行)的依赖项在每次呈现时都发生变化。将其移动到useEffect回调中。或者，将'someUnchangingArray‘的初始化封装在它自己的useMemo() Hook react钩子/详尽-deps中。
为什么？someUnchangingArray是一个常量且不会改变，为什么render暗示它将在每次呈现时触发useEffect？
export default function Component(
const [initialized, setIni
浏览 2提问于2022-02-14得票数 0
1回答
我有一个组件'DashboardServiceEntry‘，用作仪表板的入口点。
“仪表板”从Redux读取当前的Options.viewLevel，并使用它进行API调用并显示要显示的内容。
在'DashboardServiceEntry‘中分配useEffect中的操作，更新redux，但在存储中可用之前，'Dashboard’组件将呈现并在redux存储中读取错误的值，从而触发不必要的api调用。
当redux正确更新时，另一个API调用(正确的调用被启动)。
如何使Dashboard组件仅在商店更新后才被加载？
谢谢你们善良的人。
import Dashboar
浏览 7提问于2022-02-01得票数 0
1回答
通过下面的代码片段，尝试使用react钩子创建经过身份验证的路由，当我刷新页面时，当令牌可用时，它将不会在第一次呈现时在useEffect中被选中。我在这里做错了什么
const AuthRoute = ({ component: Component, ...rest }) => {
const context = useContext(AuthStateContext)
const token = window.localStorage.getItem('token')
useEffect(() => {
if (token) {
浏览 2提问于2020-03-26得票数 1
回答已采纳
1回答
我一直在读关于Cassandra的行缓存的文章，并看到了这样的文章：
在行缓存的新实现中，不需要保存整个分区。相反，您可以指定每个分区在创建表时要保存的行数。然而，当写请求出现时，驱逐策略是什么？即使在给定的分区中只有一行被修改，它是否仍然使整个分区无效？
浏览 1提问于2017-03-12得票数 1
回答已采纳
我知道它会很小，但是如果将函数放在React组件之外，性能会有差异吗？
例如第1版：
const handleFetch = () => {
// Make API call
}
const MyComponent = () => {
useEffect(()=>{
handleFetch();
})
return(<p>hi</p>)
}
Vs第2版：
const MyComponent = () => {
const handleFetch = () => {
/
浏览 2提问于2020-03-12得票数 7
回答已采纳
4回答
我从本地存储处得到数据。我用的是useEffect。但是当我想要得到对象的值时，我就有问题了。
const [carinfo, setCarInfo] = useState();
useEffect(() => {
const storedData = JSON.parse(localStorage.getItem("carData"));
setCarInfo(storedData);
console.log(storedData.brand);
}, []);
console.log(carinfo.brand);
console.log(s
浏览 7提问于2022-04-16得票数 0
我正在构建我的第一个the本机应用程序，并且很难完全理解新引入的react
基于使用该应用程序的用户(因此是一个API调用)，我为每个用户提供了许多PeopleListItem组件。在每个PeopleListItem中，我想设置一个状态，状态根据应用程序中的用户操作进行更改。因此，用户John可以呈现一个包含两个PeopleListItem组件的页面，如下所示：
<PeopleListItem>
// Somewhere in the component definition
const [attributeVale, setAttributeValue] = useS
浏览 0提问于2021-11-28得票数 0
回答已采纳
我可以正确地获取数据并在控制台中看到它，就像我希望它显示的那样，但是映射和通过它是我似乎失败的问题。
这是我的密码
import React, {useState, useEffect} from 'react'
import axios from 'axios';
import server from '../backend/server.jsx';
import Home from './Home';
function ListImage() {
const [api, setApi] = useSta
浏览 1提问于2022-05-24得票数 0
当我单击Delete按钮时，我的代码无法工作。函数handleRemove中可能存在问题。 import React, { useState, useEffect } from 'react'
import axios from 'axios'
// API endPoint - Punk API
const API_URL = 'https://api.punkapi.com/v2/beers'
const List = () => {
const [drinks, setDrinks] = useState([])
浏览 12提问于2021-10-12得票数 0
好日子，我有一个项目，它从API获得一个响应，然后将数据从父传递给子项目。问题是，我可以轻松地在顶层访问响应，但是当我试图进入API的内部部分(在本例中是price={statistics.quotes.USD.price})时，我得到了TypeError: Cannot read property 'USD' of undefined错误。我已经试过console.logging的价格，以检查我的道路是否正确，它是。当我能够正确地访问其他数据时，为什么会发生这种情况？
Overview.js
import React, { useState, useEffect } from
浏览 0提问于2021-03-02得票数 1
3回答
请帮助useCallback，如何调用它，使useEffect不会向服务器发送没完没了的请求？现在它发出了无尽的请求，我知道这需要useCallback，但我不知道如何使用它
// Get data
useEffect(() => {
api.getTestLeagues()
.then(data => setLeagues(data));
api.getTestCountries()
.then(data => setCountries(data));
if(sidebars === null && leagues
浏览 2提问于2020-03-27得票数 0
回答已采纳
这是在组件中分配API调用的最佳挂钩。通常我使用useMemo在第一次呈现时调用API，如果需要额外的副作用，使用useEffect，这是正确的吗？因为有时我会犯以下错误：
‘索引. as :1警告:不能在呈现另一个组件(Inscriptions)时更新组件(PaySummary)。
当我路由到一个组件并快速地切换到另一个组件时，如果我返回到它按照预期正确呈现的前一个组件，它不会“影响”一般的行为。那我该怎么做呢？
浏览 2提问于2020-07-25得票数 8
回答已采纳
我有一个带有登录/注销功能的react应用程序。我希望应用程序在重新加载后保持登录，为此我使用cookies。问题是，在我实现了我认为应该可以工作的东西之后，我得到了一个“警告，超过了最大更新深度。当组件在useEffect中调用setState，但useEffect要么没有依赖项数组，要么每次呈现时都有一个依赖项更改时，就会发生这种情况”消息。
我做错了什么？
非常感谢！
下面是代码。
sessions.ts
import React from "react";
import * as Cookies from "js-cookie";
export con
浏览 4提问于2020-04-29得票数 2
3回答
如何防止组件每次重呈现？
、、、、
我有一个自定义组件，在这个组件中，我希望防止每次组件呈现时触发useEffect。
其主要思想是从API中获取字体族名称，然后将其传递给样式值，因此我只想获得一次字体家族--而不是每次组件在其他屏幕中呈现时。
下面是我尝试过的，但是它不像预期的那样工作，它没有在从API获得值(getValue()未调用)之后更新状态。
import React, {useCallback, useEffect, useRef} from 'react';
import {useState} from 'react';
import {Text, StyleSheet, Plat
浏览 4提问于2021-12-20得票数 2
1回答
在使用效果上，我正在检查用户的当前角色，如果是admin setAdmin(true)设置管理状态。默认的管理状态为false。当组件被呈现时，它会以admin形式呈现为false，并且状态在某个时候被更新。我想在状态更新后调用api和呈现数据。
useEffect(async () => {
//Authenticates User through their email
let firebaseId;
const user = await firebase.auth().currentUser;
if (user) {
let getUse
浏览 2提问于2022-02-01得票数 1
我使用的是react和一个mongoose/mongo数据库。在页面加载时，我执行API调用并接收一个对象数组(它们是带有标题、描述等的“帖子”)。我正在尝试映射数据，以便在不同的卡片上动态显示帖子信息。我可以从API调用中获取数据，但是当我尝试将状态更改为对象数组并通过控制台记录它时，我得到了未定义的数据。
附件是代码和结果的照片：
为什么usestate不接受来自数据的状态变化？附件是我的代码：
import React, { useState, useEffect } from 'react'
import API from "../utils/API"
浏览 0提问于2021-01-06得票数 0
我是一个新的react，这个羽毛笔插件真的把我搞糊涂了。我使用react-quilljs来显示一个可编辑的富文本字段，该字段应该预先填充了使用fetch from my API检索到的值。看起来很简单，对吧？但是我在fetch回调中得到了错误‘羽毛未定义’。 import React, { useState, useEffect } from "react";
import { useQuill } from "react-quilljs";
import "quill/dist/quill.snow.css";
import "qu
浏览 28提问于2020-12-30得票数 2
最近，我在开发一些业务逻辑时遇到了这种情况。下面是一个简化的、精心设计的示例
function App() {
const [myState, setMyState] = useState([])
useEffect(() => {
setTimeout(() => {
setMyState((prevState) =>
prevState.concat([
{
type: 'foo',
enabled: true,
},
浏览 4提问于2020-08-23得票数 3
我想我理解为什么React.StrictMode会导致函数。但是，我有一个从api加载数据的useEffect：
useEffect(() => {
async function fetchData() {
const data = await getData();
setData(data);
}
fetchData();
}, []);
在我的getData()函数中，我调用了一个维护脚本cullRecords()，它在返回数据之前删除超过一定年龄的记录来清理数据：
async function getData(){
let results = aw
浏览 3提问于2022-11-27得票数 0
尝试转录存储在我访问的S3存储桶中的音频文件时，使用AWS SDK PHP API，如下所示，给我一个节流异常:超过速率。 我已经阅读了文档十几次，但找不到一个简单的工作示例来展示如何使用AWS转录和他们的PHP API成功地转录文件。 date_default_timezone_set('America/New_York');
try
{
require '/var/www/html/aws/sdk/aws-autoloader.php';
}
catch (Exception $e)
{
echo 'Caught except
浏览 8提问于2019-04-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
