如何在没有useEffect的React组件中使用异步等待
在没有useEffect的React组件中使用异步等待，可以通过使用async/await和Promise来实现。下面是一个示例代码：
import React, { Component } from 'react';
class MyComponent extends Component {
async fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
componentDidMount() {
this.fetchData().then((data) => {
// 处理异步获取的数据
console.log(data);
}).catch((error) => {
// 处理错误
console.error(error);
});
}
render() {
return (
<div>
{/* 组件的内容 */}
</div>
);
}
}
export default MyComponent;在上述代码中，我们定义了一个fetchData方法，使用async/await来发送异步请求并等待响应。在componentDidMount生命周期方法中调用fetchData方法，并使用then来处理返回的数据，使用catch来处理可能发生的错误。这样可以在组件挂载后发送异步请求，并在获取到数据后进行相应处理。
这种方式的优势是代码简洁清晰，易于理解和维护。异步操作可以更好地与组件生命周期相结合，避免出现竞态条件和其他问题。
在这个示例中，腾讯云提供了一些相关的产品，例如云函数（https://cloud.tencent.com/product/scf）和API网关（https://cloud.tencent.com/product/apigateway），可以用于构建和部署服务器端逻辑和接口，以实现与后端的交互和数据获取。
相关·内容
我的react应用程序中有下一个组件：
import React, { useEffect, useState } from "react";
import AsyncSelect from "react-select/async";
import { ColourOption, colourOptions } from "./docs/data";
const App = () => {
const [state, setState] = useState([]);
useEffect(() => {
set
浏览 9提问于2021-12-14得票数 0
我有一个用最小模板构建的React应用程序，我试图跟随他们的一个教程，以便创建一个Redux切片，将一些数据提供给一个自定义组件。数据本身是从Firebase收集的。下面是我的代码：
firebase.js - helper
export function getDocuments(col) {
const colRef = collection(db, col);
const q = query(colRef, where('uid', '==', auth.currentUser.uid));
getDocs(q).then((sn
浏览 2提问于2022-05-06得票数 1
回答已采纳
1回答
我有一些用Typescript编写的React Redux代码，当组件挂载时，它会从我的服务器加载一些数据。该代码如下所示：
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { MyAction } from 'my/types/MyAction';
export const useDispatchOnMount = (action: MyAction) => {
const dispatch = useDis
浏览 3提问于2020-08-12得票数 1
4回答
有些人能通过我的代码，看看我做了什么错误。
React与Axios代码
import React, { useState, useEffect } from "react";
import { useParams, Outlet } from "react-router-dom";
import axios from "axios";
export default function Agent() {
const [Agent, setAgent] = React.useState();
const agentid = use
浏览 9提问于2022-03-22得票数 1
我是React和Redux的新手。现在学习有关钩子的知识，并感到非常困惑。做一个教程应用程序(老师正在使用类)，这个应用程序应该从jsonplaceholder (异步)中获取一些API数据，然后再与redux一起使用。目前，我无法在屏幕上显示获取的数据。
在最下面还有两个我的补充问题。
我的代码(不起作用)：错误: TypeError: posts.map不是函数
PostList.js
import React, { useEffect, useState } from "react";
import { fetchPosts } from "../actions&
浏览 3提问于2020-06-03得票数 1
回答已采纳
在我的React组件中，我有一个async请求，它将一个操作分派到在useEffect钩子中调用的Redux存储：
const loadFields = async () => {
setIsLoading(true);
try {
await dispatch(fieldsActions.fetchFields(user.client.id));
} catch (error) {
setHasError(true);
}
setIsLoading(f
浏览 2提问于2019-09-30得票数 3
我很难从一个小型的fetch()应用程序中调用React。
我的想法是
有一个class (这样我就可以重用它)，调用fetch，通过从服务器获取数据从json-data中获取json-data。
class看起来像：
import React from 'react';
class GetJsonData extends React.Component {
constructor(props) {
super(props);
this.state = {
id: this.props.id,
content: this.props.content
浏览 4提问于2022-08-07得票数 0
我想(现在)从promise中检索一个字段，并将其呈现为弹出模式中的标题。我得到了使用useEffect解决的承诺，它确实填充了我的模式，但是它在等待响应设置值时会有一点延迟。 我试着在同一个文件中的Modal下面创建另一个函数来使用aync/await，但是我在弄清楚把它们放在哪里时遇到了麻烦，因为我总是因为错误地使用它而得到错误，或者promise中的任何东西都没有被返回。 import React, { useState, useEffect } from 'react';
import './Modal.css';
const Modal = ({
浏览 42提问于2020-04-16得票数 0
回答已采纳
1回答
您好，我在我的useEffect中遇到了内存泄漏，我收到了这个错误“警告:无法在未装载的组件上执行React状态更新。这是一个禁止操作，但它表明您的应用程序中存在内存泄漏。要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务。”
当我从后台发出消息时，我正在尝试更新我的消息状态。
我的代码如下所示
useEffect(() => {
socket.on("message", data => {
setMessages(prevVal => [...prevVal, {
浏览 25提问于2021-02-25得票数 0
回答已采纳
2回答
useEffect通常使用更新状态的承诺。
此更新会在jest中引起长时间警告：Warning: An update to null inside a test was not wrapped in act(...).
如何正确地为这种情况编写Jest测试？
实例，可复制的示例：
index.test.js
import React from "react";
import Hello from "./Hello";
import { create, act } from "react-test-renderer";
it("work
浏览 25提问于2022-01-14得票数 2
回答已采纳
2回答
我一直试图使用在另一个函数中从异步函数中获得的数据，用于在react项目上显示HTML。我做了几次尝试，但似乎没有什么对我有用。希望你们中有人能帮我。如果我做错了什么，请纠正我。
我也尝试过用useEffect：
import React, { useState, useEffect } from 'react';
import { getGenres } from './api/functions';
const ParentThatFetches = () => {
const [data, updateData] = useState();
浏览 7提问于2022-05-03得票数 0
1回答
我是使用反应-包建设网站。
import React from 'react';
import Cropper from 'react-cropper';
...
export default MyComponent() {
...
const [imageSrc, setImageSrc] = useState(null);
const [cropper, setCropper] = useState(null);
....
useEffect(() => (
....
const profile = api
浏览 4提问于2020-12-19得票数 1
回答已采纳
我试图将一个函数从文件(..src/ api /index.js)中获取数据到我的App.js (..src/App.js)。
. .src/api/index.js
import axios from 'axios';
const url = 'https://covid19.mathdro.id/api';
export const fetchData = async () => {
try {
const res = await axios.get(url);
return res;
} cat
浏览 2提问于2020-08-09得票数 0
2回答
我正在从一个数据库获取一些数据，该数据库是一个对象(歌曲)数组。我想一次显示5首歌曲，因为有800多首歌曲，如果我试图一次加载所有歌曲，程序会变慢很多。 如果我直接加载歌曲，我的react部分工作得很好，但我正在尝试创建另一个状态，它一次只存储5个对象，并显示这5个对象，而我有另一个称为“歌曲”的状态，它将在开始时设置它的状态，存储800+歌曲。当我试图将这个5存储到另一个状态时，程序崩溃了。 我很感谢大家帮助我理解我的错误。 我曾尝试在修改showSongs的useEffect中设置一个console.log，但esLint (我认为它是esLint)一直在修改函数末尾的数组，在其中添加了
浏览 15提问于2019-07-04得票数 0
3回答
为什么状态不更新在反应？
、、、
我有一个Alice，在这里，我从一个从API.After获取数据的中获取条目，我正在为旋转木马更新items数组，但我得到的是未定义的项的值。CryptoState是防止支柱钻探的背景.
import React from 'react'
import { useEffect ,useState} from 'react';
import { CryptoState } from '../CryptoContext'
import { TrendingCoins } from '../api';
import axios from
浏览 7提问于2022-04-01得票数 0
我有这个项目，在这个项目中我有这两个文件，第一个文件是表单文件，第二个文件是服务文件，我想访问服务文件中包含的答案，但是我有一个错误：
Uncaught TypeError: Object(...)(...).then is not a function
我该怎么解决呢？
这个文件包含一个表单，通过这个表单，我想调用getjobs函数。
import InputAdornment from "@material-ui/core/InputAdornment";
import TextField from "@material-ui/core/TextField"
浏览 5提问于2022-04-14得票数 0
回答已采纳
2回答
我正在从本地服务器获取一个帖子列表，然后用一个表单更新它，但是提交列表后没有更新，必须重新加载它才能更新列表。我尝试添加一个计数器状态，并将其放在UseEffect的第二个参数中，它起作用了，但有时不起作用。有没有最好的方法使我的列表不需要重新加载就能与服务器保持最新状态？ 以下是我的代码 function App() {
const [posts, setPosts] = React.useState([]);
React.useEffect(() => {
getPosts();
}, []);
const getPosts = async () =&g
浏览 7提问于2021-03-29得票数 1
我试图获得副主题数据，所以首先我必须获得用户注册的课程，然后对于每个课程我得到章节，然后对于每个章节，我得到主题，最后，我从每个主题中获得副主题，并将它们全部推到临时数组中。但是，当我试图在第二个useEffect中打印它时，它返回一个空数组，尽管在FetchSubtopics函数中进行了打印。
import React from "react";
import { useEffect, useState } from "react";
import { useLocation, Link } from "react-router-dom";
i
浏览 9提问于2022-07-03得票数 0
回答已采纳
2回答
我想用.toLocalString()修改道具接收的内容，但是控制台返回一个错误：
TypeError:用例未定义测试组件中的ligne : const = cases.toLocalString()
然而，如果我直接渲染道具没有修改，它的工作，所以道具不是未定义的。
这是父组件：
import React, { useEffect, useState } from "react";
export default function App() {
const [globalStats, setGlobalStats] = useState({})
const ge
浏览 1提问于2020-04-14得票数 1
回答已采纳
4回答
干杯,
我有下面的React代码，在这里我需要发送一个HTTP请求来检查我的实际用户是否有访问我的页面的权限。为此，我使用useEffect钩子检查每个页面条目的权限。
但是我的实际代码并没有等待authorize()的结论。引导/Unauthorized页面的每个请求。我做错什么了？
import React, { useState, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { security } from "../../se
浏览 7提问于2022-08-21得票数 0
希望你们今天过得愉快！
我想问一些问题，我需要从API返回一些列表数据，
我有3个文件，一个名为getUser.js，othe User.js和OtherUser.js，我已经在getUser.js中从API中获取数据，我需要从getUser.js访问数据来填充User.js和OtherUser.js。
问题是，我不能返回getUser.js中的数据
这是我在getUser.js中的代码
import React from "react";
export const getUser = async () => {
await fetch("https://m
浏览 5提问于2022-06-28得票数 0
回答已采纳
我在试图弄清楚如何在reactjs中从Firestore获取地图数据时遇到了麻烦。我的代码总是错误地说“对象作为React是无效的”。有没有人能给我举个例子，或者给我看一下下面的数据库？ import React, { useState, useEffect } from "react";
import { firestore } from "../../../FireBase/FireBase";
import CartItem from "./CartItem";
const CartPage = (props) => {
con
浏览 45提问于2021-03-20得票数 0
回答已采纳
我有一个异步函数setInitialData，它在应用程序provider中的useEffect钩子中被调用。我想测试函数是否已被调用。这个测试失败了。为什么？
const dispatch = jest.fn();
const state = {...}
jest.mock('../context/actions', () => ({
setInitialData: jest.fn(),
}));
test('setInitialData fn is called in useEffect hook in the provider', () =&g
浏览 1提问于2020-03-15得票数 0
回答已采纳
React设计原则文档说明了。虽然它没有提到useEffect，但声明：
useEffect是做什么的？通过使用这个钩子，您可以告诉React，您的组件在呈现之后需要做一些事情。
对我来说也是异步的。
act()文档
在编写UI测试时，可以将呈现、用户事件或数据获取等任务视为与用户界面交互的“单元”。react DOM /test-utils提供了一个名为act()的助手，它确保所有与这些“单元”相关的更新在您进行断言之前都已被处理并应用到DOM中。
Sunil在他的文章中澄清了这一点：
对于在其作用域内运行的任何代码，它都有两项保证：
任何状态更新都将被执行。
浏览 6提问于2022-02-06得票数 1
我正在尝试使用后端对REST API的API调用产生的数据来更新React应用程序的上下文。问题是我不能同步函数。
我已经尝试了这篇博客文章中建议的这个解决方案，但它对我的情况不起作用。
下面是textContext.js的代码
import React, {useEffect, useState} from "react";
import axios from "axios";
var text = "Test";
fetch(process.env.REACT_APP_TEXT_API)
.then(res => res.j
浏览 2提问于2019-09-12得票数 12
回答已采纳
1回答
我试图在我的应用程序中添加“反应懒惰”，但由于某种原因，它似乎不起作用。
我希望延迟加载工作的组件从服务器获取其数据，然后呈现数据。问题是，在数据实际加载之前，在悬念标记中获取数据的组件会被加载。这是我的密码：
AnotherTest.jsx
const AnotherTest = () => {
const [toDoListData, setToDoListData] = useState([]);
useEffect(() => {
async function fetchData() {
setTimeout(asy
浏览 0提问于2019-05-23得票数 1
回答已采纳
// Home.js
import React, { useState, useEffect } from "react";
import Todo from "../components/Todo";
import { firestore } from "../database/firebase";
export default function Home() {
const [todos, setTodos] = useState([]);
useEffect(() => {
firestore
.co
浏览 25提问于2020-03-27得票数 1
回答已采纳
我目前正在开发一个API调用，它的工作方式与Postman中的预期完全相同，但是当在前端浏览器上进行相同的调用时，它不会返回相同的数据。堆栈是MERN。 其中非常有趣的部分是Axios请求每次都返回不同的数据数组。为了帮助解释这一点，出于测试目的，数据库在进行调用时只返回4条消息。在Postman中，每次都会返回所有4条消息。但是使用React-Redux时，Axios调用有时会返回2条消息，有时会返回3条消息，但永远不会像预期的那样返回完整的4条消息。 编辑:看起来这是一个useEffect问题，我创建了一个按钮，它调用相同的接口请求，并返回所有4条消息。其他人有过这个问题吗？ 下面是AP
浏览 58提问于2021-07-26得票数 0
1回答
我定义了一个useState对象如下：
const [groupDetails, setGroupDetails] = React.useState([
{ fullName: "", phoneNo: "", gender: "" },
]);
const [state, setState] = React.useState({
fullName: "",
phoneNo: " ",
email: "",
gender: "",
浏览 2提问于2020-05-28得票数 0
回答已采纳
我想要创建一个票证功能。在主页面(父页面)上，我有一个axios函数，一旦加载了页面，useEffect就会列出所有的票据组件。
在第二个页面上，我有一个子组件，每次添加新的票证时，我都会用道具导入要使用的reloadTickets={fetchTickets}方法。
问题是，如果我添加一个帖子，一次没有添加该帖子，第二次添加该帖子两次，第三次在单个表单提交上添加太多次。有时帖子根本不加，但在我试了更多次后，帖子被添加了两次和更多……
这是我的母公司COMPOENTN
这是我的子组件
PS。很抱歉拍到这些照片。但是，在我的页面上，react代码不能被格式化为好看。
浏览 3提问于2022-03-27得票数 0
回答已采纳
在我的react应用程序中，我希望使用API数据初始化组件的状态。工作的一种方法是在useEffect()中进行API调用，然后在API调用之后设置状态，但这将发生在组件的初始挂载之后。
我只是想知道是否还有其他方法在组件初始挂载之前初始化状态？这是我试过的，但不起作用。
async function getAns() {
let output = [];
//make api calls and assign data to output
//.......
return output;
};
const [playersList, setPlayers
浏览 6提问于2022-05-16得票数 1
回答已采纳
我对Jest和测试非常陌生，所以我正在使用React、和Jest开发一个应用程序来提高我的技能。
我的一次测试失败了，我不知道为什么。下面是我测试的代码：
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
// using UrlShortener since the state has been lifted up for UrlList
import UrlShortene
浏览 2提问于2021-09-27得票数 1
4回答
我有一个react组件，它根据用户的登录状态有条件地呈现JSX。
<div>
{ boolIsLoggedIn ?
<SomeLoggedInComponent /> : <SomeNotLoggedInComponent /> }
</div>
我认为我需要使用React.useState()和/或React.useEffect()，但我不确定具体如何实现它。
我试过这个：
const [boolIsLoggedIn, setBoolIsLoggedIn] = useState(isLoggedIn())
useEffect(
浏览 10提问于2021-03-21得票数 0
2回答
我是React的新手。目前，我正在学习Hooks。我在研究useEffect hook的事。它主要与生命周期方法(componentDidMount、componentDidUpdate和componentWillUnmount等)进行比较。我的问题是关于这些函数的行为。生命周期方法是同步运行还是同步运行？那useEffect呢？
浏览 4提问于2019-11-08得票数 2
6回答
我的函数组件使用useEffect钩子从挂载上的API中获取数据。我希望能够测试获取的数据是否正确显示。
虽然这在浏览器中运行良好，但是测试失败了，因为钩子是异步的，组件没有及时更新。
实时代码：
App.js
import React from "react";
function getData() {
return new Promise(resolve => {
setTimeout(() => resolve(4), 400);
});
}
function App() {
const [members, setMembers] =
浏览 0提问于2019-07-12得票数 17
我使用了nodejs和xampp来创建服务器。从那里，我通过作为前端的React获取数据。数据正在控制台中记录，但当我试图访问这些值时，它将显示为无法读取未定义的属性。
这是后端API的结果。
[{"id":1,"Featured":"true","Ratings":5}]
这是前面的代码
import React, { useEffect, useState } from "react";
export default function QueryData() {
const [backenddata, s
浏览 3提问于2020-08-23得票数 1
回答已采纳
我收到了这些小错误
./components/create-nft/InstagramSelector.js
39:15 Warning: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
useEffect(() => {
async function fetchData() {
// You can await here
const response = await MyAPI.getData(someId);
// .
浏览 2提问于2022-05-06得票数 1
1回答
我如何等待function钩子"useMemo“中包装的函数返回的承诺来解决/拒绝？
目前，我的代码如下所示：
// Get the persisted email/username
const persistedUsername = useMemo(async () => {
let username;
try {
username = await AsyncStorage.getData(`@${ASYNC_STORAGE_KEY}:username`);
} catch {}
return username;
},
浏览 2提问于2020-12-13得票数 1
回答已采纳
此函数组件有一个调用onChangeHandler的模板方法，该方法接受select值并更新state。问题是，在第二次调用render方法之后，state才会更新，这意味着所选选项的值比selectedRouteName的state值高出一步。
我知道类组件中有一些生命周期方法，可以用来强制state更新，但如果可能的话，我希望将它保留为一个函数组件。
正如代码中所指出的，selectedRouteDirection的日志状态是所选选项后面的一个值。如何强制state更新到功能组件中的正确值？
这个问题与同名的问题不一样，因为我的问题询问的是我的用例中的实际实现，而不是它是否可行。
impo
浏览 0提问于2019-12-09得票数 3
回答已采纳
2回答
我试图使用括号&点表示法访问对象的属性。但出于某种原因，它说对象没有被定义。
以下是反应代码：
import React from "react";
const App = () => {
const [data, setData] = React.useState({});
const fetchCovidData = () => {
fetch("https://api.covid19api.com/country/south-africa")
.then((response) => response
浏览 3提问于2020-08-08得票数 0
回答已采纳
这是我的代码，我尝试了一堆方法，但我不知道如何让它们正常工作:/我感谢任何形式的帮助！
const fetchData = React.useCallback(() => {
fetch('http://5sd780beaf65.ngrok.io/api/Data')
.then(response => response.json())
.then(responseJson => {
setData(responseJson);
setFullData(responseJson.results);
set
浏览 0提问于2021-03-04得票数 0
通过从组件追溯到组件，我发现了一个问题。
我有一个Quiz组件，它是一个父组件，它将存储3个子组件，包括我的Clock组件。
一开始，我认为我的时钟部件出了问题，所以我花了几天时间在这个组件上计算出它的间隔函数。
但是后来我注意到的是，它总是先呈现undefined，我仍然试图在Clock组件中修复它，然后我记得我把time作为道具从Quiz中传递过来，然后我将它追溯到Quiz组件，在这里我发现，每当Quiz组件第一次呈现时，它会得到undefined，然后在第二次呈现时，它会显示我想要的正确数据，所以这就是为什么我的Clock组件不能工作。
那么，有什么方法可以让Quiz组件第一次呈现数据呢
浏览 4提问于2021-07-06得票数 0
回答已采纳
我很熟悉react，我发现使用useEffect真的很容易，thunk很难处理，我可以只使用useEffect & axios而不使用createAsyncThunk将结果发送到商店吗？在useEffect上使用它有什么主要的性能好处吗？
createAsyncThunk：
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'
// First, create the thunk
const fetchUs
浏览 1提问于2021-04-11得票数 10
回答已采纳
1回答
我在react中编写了一个axios请求--本地useEffect.The请求在后端是成功的，并且在terminal.But中返回一个正确的响应，useEffect钩子没有按照它工作，.It仍然以未定义的形式返回产品，并且不改变状态。如果一切正常，产品将包含产品变量。只有当我再次保存它，然后它显示产品时，它才能工作。我是不是漏掉了什么？提前谢谢!！
const [product, setProduct] = useState();
useEffect( () => {
getproductinfo()
if (props.editMode) {
浏览 2提问于2022-02-03得票数 1
我试图像这样使用useEffect函数：
const [data, setData] = useState({ courses: [] });
useEffect(async () => {
const result = await axios.get(
"http://example.com/api/v1/categories/"
);
await setData(result.data);
}, []);
console.log(dat
浏览 15提问于2020-08-25得票数 24
回答已采纳
我试图理解在useSelector中使用_bootstrapAsync的区别在于它以这种方式失败了
import React, { useEffect,useState } from "react";
import { useSelector } from 'react-redux'
import { ActivityIndicator, StatusBar, View, Text } from "react-native";
export default function authLoading({ navigation }) {
浏览 0提问于2019-12-09得票数 0
我一直在尝试使用setTimeout来使Popper组件从用户屏幕上消失。Popper设置为在用户单击按钮后出现。Popper组件的可见性与下面的"popperOpen“状态相关联。
我尝试过将setTimeout方法放入相关按钮的回调函数中，并将其放置在没有依赖数组的useEffect中(这两种方法都如下所示)。在前者中，波普尔立即消失。在后者中，波普尔永远不会消失。下面没有显示，但我也尝试了在依赖数组中使用"popperOpen“的popperOpen。
获得所需功能的正确方法是什么？更根本的是，我应该如何在react的上下文中考虑setTimeout？(即常数重呈现)。
浏览 7提问于2022-09-29得票数 0
回答已采纳
2回答
在我的React组件中，useEffect()内部有一个奇怪的问题。当页面加载时，我必须发出两个单独的axios请求来获取数据。在将数据对象传递给JSX之前，我试图使用一个钩子变量来查看数据对象是否被填充。下面是我的当前配置：
import React, { useState, useEffect } from 'react';
import Navbar from '../components/layout/Navbar';
import ContactsCard from '../components/layout/ContactsCard'
浏览 0提问于2021-08-07得票数 0
回答已采纳
2回答
所以这就是主要的想法，就是能够用React.lazy和React.Suspense加载任何封装的组件。有可能吗？所以，我已经能够写一些了，但不确定我是否能够正确地制作… import React, { Suspense, lazy, useState, useEffect } from "react"
export function withLazyImport(LazyComponent) {
return (props) => {
const [loadedComponent, setLoadedComponent] = useState(null)
浏览 23提问于2020-07-15得票数 2
回答已采纳
2回答
如何用useEffect测试异步react-testing-libs？
我有：
// in other file
const getData = () => {
return new Promsise(resolve => setTimeout(() => resolve([1, 2, 3]), 5000));
};
const MyComponent = () => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () =&
浏览 0提问于2021-01-08得票数 14
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
