如何从React中的Promise中获取值？
在React中处理Promise以获取值通常涉及到使用async/await语法或者.then()链式调用。以下是两种方法的详细解释和示例：
使用 async/await
当你在React组件中需要等待一个Promise完成并获取其结果时，可以使用async/await语法。这种方法使得异步代码看起来更像同步代码，从而更容易理解和维护。
示例代码：
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();
}, []);
return (
<div>
{data ? <p>{data.message}</p> : <p>Loading...</p>}
</div>
);
}
export default MyComponent;解释：
- 使用
useState创建一个状态变量data来存储从Promise获取的值。 - 使用
useEffect钩子在组件挂载时执行异步操作。 - 在
fetchData函数内部，使用await关键字等待fetch和response.json()这两个Promise完成，并将结果存储在result变量中。 - 如果发生错误，使用
try/catch块捕获并处理错误。 - 最后，将获取的数据设置到
data状态变量中，并在组件中进行渲染。
使用 .then() 链式调用
另一种处理Promise的方法是使用.then()链式调用。这种方法在处理多个连续的Promise时特别有用。
示例代码：
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(result => {
setData(result);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}, []);
return (
<div>
{data ? <p>{data.message}</p> : <p>Loading...</p>}
</div>
);
}
export default MyComponent;解释：
- 使用
useState创建一个状态变量data来存储从Promise获取的值。 - 使用
useEffect钩子在组件挂载时执行异步操作。 - 调用
fetch函数并使用.then()方法链式处理返回的Promise。第一个.then()处理HTTP响应，将其转换为JSON格式。第二个.then()处理解析后的数据，并将其设置到data状态变量中。 - 如果发生错误，使用
.catch()方法捕获并处理错误。
这两种方法都可以有效地从React中的Promise获取值，并根据你的需求和偏好选择使用哪一种。
相关·内容
我正在尝试从React中的另一个数组创建一个对象数组。下面是我的函数 let filesArray = []; const imageStr =label: file.name, dataType: type,}) selectedDocuments是选定文件的数组toBase64是我创建
浏览 374提问于2021-02-11得票数 0
回答已采纳
2回答
将变量设置为Axios调用
、、、、
在React中，我试图在返回数据后将一个变量设置为axios调用。但是，当控制台记录变量之后，这是一个承诺。如何从promise中获取值并将其设置为变量？
浏览 2提问于2018-02-17得票数 2
我试图从浏览器控制台中的Promise对象获取值，当我在TextInput中输入一些数据时，尝试使用Asyncstorage从另一个页面获取数据时，我收到了一个包含值(Hello)的Promise对象例如 Promise {_40: 0, _65: 0, _55: null, _72: null} _40: 0 _65: 1 _55: ""Hello"" _72: null__proto__:
浏览 85提问于2020-02-02得票数 0
.catch(err => console.error(err));import BookCards from ".());};
export default BookCardsC
浏览 36提问于2019-03-06得票数 1
回答已采纳
我是react原生的新手，所以我想从一个函数中获取值，并将其组合到axios头中。config.headers['X-Security-Key'] = getSecurityKey()
}, function (error) {})
这是如何获得值的？
浏览 0提问于2021-02-22得票数 0
1回答
我需要为将来的请求获取userKey (自动生成)： userKey= child.key
});
//Outside the promisethis.db.list('user-list/'+userKey+'&
浏览 15提问于2018-02-16得票数 1
1回答
我刚开始使用原生react，在promise中很难从firebase查询中获取值。我尝试在promise中使用setState，但控制台返回: TypeError：_this2.setState不是一个函数。promises = keys.map(function(key) { });
Promise.all
浏览 6提问于2019-03-09得票数 1
回答已采纳
我刚开始反应，我想知道从承诺中获取数据的正确方法。const fruits = [ id: '1', }, id: '2', }
const fruits$ = new Promise<
浏览 2提问于2019-11-25得票数 1
回答已采纳
好的，我有一个变量valid，它在promise之前定义为true。然后，我有了promise本身，我希望根据从promise接收到的信息来更新.then(() => {})构造函数中的有效变量。但是，似乎存在时间问题，因为它是异步发生的。你知道如何从promise中获取值，并更新变量，这样我就可以访问promise之外<
浏览 0提问于2021-03-27得票数 2
我是nodejs的新手，我承诺，我正在尝试从json获取一些数据，并将它们传递给其他函数进行进一步处理，这是我的代码。termination_date: null,}test.then(result => { })test.then(result =>
浏览 3提问于2020-01-02得票数 0
首先，我认为resolve只是将参数传递给then中的函数，所以我尝试这样做 resolve(new> console.log(num))promise.then(num => console.log(num))
注释的代码行有一个错误：innerPromise.then is nota function，所以我假设如果您有一个<e
浏览 0提问于2020-03-16得票数 1
7回答
如何用Jest测试异步存储？
、、、、
我希望尽量减少与数据库的通信频率，因此我大量使用了AsyncStorage。不过，DB和AsyncStorage之间的转换还有很大的空间。因此，我希望通过对AsyncStorage运行自动化测试来确保它拥有我相信的数据。令人惊讶的是，我还没有在网上找到任何关于如何做到这一点的信息。我独自一人做这件事的尝试没有成功。当我试图使用await关键字测试它时，我遇到了完全相同的错误：
it('can read asyncstorag
浏览 20提问于2016-12-03得票数 33
回答已采纳
我决定在我的React中尝试并学习打字稿，我犯了第一个错误，我找不到答案，也找不到答案。 price: number; object2: { price: number;然后从我的外部API中获取值。();
在经典的JS中，我只会为价格创
浏览 1提问于2021-08-06得票数 4
回答已采纳
= result.data.value; }).catch(e => console.error(e));};var getMyValue = rUtil.grabValue();
这将返回getMyValue的undefined值。我基本上想从我的grabValue函数中返回值。
浏览 3提问于2017-09-22得票数 0
我使用pg-promise，并尝试向用户模型中的数据库发出请求，以获取所有用户的数组，如下所示： let usersreturn data; // in debug mode data is my expected array return users;但是当我从控制器发出get请求时，它返回promise Promise</
浏览 8提问于2020-07-14得票数 0
1回答
我尝试使用react-admin和一个Node服务器来使授权和权限可用：// in src/authProvider.js }但我不明白它是如何工作的，在登录时，服务器返回一个user对象，如下所示：
{user: {id:5e429d562910776587c567a2"
浏览 13提问于2020-03-03得票数 1
cqlsh>从UCBAdmissions中选择*；
身份证，承认，部门，女性，性别
5名被接纳的人-B16被拒绝D\x{e76f}
13获接纳.D/ 13
浏览 3提问于2015-12-15得票数 1
我有一个函数，其中GetDataFactory.getDataById(reqData)是带有$http请求的函数，并返回正确的数据，当这些数据到达时，我想在另一个函数中使用它，但这种方式总是返回给我"Promise {$$state: Object}“ var reqData = {return foo;
console.log(
浏览 1提问于2016-05-05得票数 0
2回答
我正在Node.js中执行一些HTTP调用，并希望检查请求是否失败--我的意思是错误不一定被视为“失败条件”，而是希望在此基础上执行一些业务逻辑。我有一些类似于以下代码的代码(很明显，这是由于我简化了它而设计的)： // In the realimplementation this would make an HTTP request.
// The <e
浏览 6提问于2017-10-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
