React Promise不会返回值

Question

当我试图解决我的承诺时，我得到了错误"对象作为React子对象无效(找到：[object Promise](">

在GetCardsFromBoard((中API请求之后的console.log中，我的响应的typeOf((是字符串，它将数据打印到控制台。但是在TrelloTest((中，控制台显示我的响应仍然是Promise<pending>，并且我得到了错误。

我已经尝试了很多配置，但我无法得到我的承诺来解决，谢谢你的帮助！

const fetch = require('node-fetch');
export async function GetCardsFromBoard(board) {

let cards = await fetch(
baseURL+'boards/'+board+'/cards?key='+key+'&token='+token, 
{
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then(response => {return response.text()})
.catch(err => console.error(err));
console.log(typeof(cards), cards); //prints "string" type and then the entire json response
return cards;
}

export function TrelloTester() {

let bodyStr = GetCardsFromBoard(boardID);
console.log("resp: ", bodyStr); //shows Promise<pending>, but with the correct response value inside
return (
<BigCard header=" " body={bodyStr}/>
);

}
export default TrelloTester;

Answer 1

GetCardsFromBoard返回Promise。async/await只是promise之上的糖，实际上并没有降低代码的异步性。因此，您的TrelloTester组件仍然必须将该函数视为Promise。

请注意，我删除了您的承诺中的then；如果您使用async/await，那么您只需await所有的承诺！

export async function GetCardsFromBoard(board) {
try {
const cards = await fetch(
baseURL+'boards/'+board+'/cards?key='+key+'&token='+token, 
{
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
return await cards.text();
} catch(e) {
console.log(e);
}
}

在您的组件中，由于这是异步的，我建议将其视为一种效果，并将useEffect钩子与useState钩子结合使用。

import React, { useEffect, useState } from "react";
export function TrelloTester() {
const [bodyStr, setBodyStr] = useState("");
useEffect(() => {
cont getCards = async () => {
const cards = await GetCardsFromBoard(boardID);
setBodyStr(cards);
}
getCards();
}, []);
return bodyStr ? (
<BigCard header=" " body={bodyStr}/>
) : "Loading...";

}
export default TrelloTester;

Answer 2

http响应需要转换为json，请使用json((方法。

let cards = await fetch(
baseURL+'boards/'+board+'/cards?key='+key+'&token='+token, 
{
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then(response => {return response.json()})
.catch(err => console.error(err));