При попытке выполнить мое обещание я получаю сообщение об ошибке «Объекты недействительны в качестве дочернего элемента React (найдено: [object Promise])».
В console.info после моего запроса API в GetCardsFromBoard() мой ответ typeOf() является строкой, и он выводит данные на консоль. Но в TrelloTester() консоль показывает, что мой ответ по-прежнему 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.info(typeof(cards), cards); //prints "string" type and then the entire json response
return cards;
}
export function TrelloTester() {
let bodyStr = GetCardsFromBoard(boardID);
console.info("resp: ", bodyStr); //shows Promise<pending>, but with the correct response value inside
return (
<BigCard header = " " body = {bodyStr}/>
);
}
export default TrelloTester;
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));
GetCardsFromBoard возвращает обещание. async/await — это просто сахар поверх промисов, который на самом деле не делает код менее асинхронным. Следовательно, вашему компоненту TrelloTester все равно придется обрабатывать функцию как обещание.
Обратите внимание, что я удалил 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.info(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;
GetCardsFromBoard
возвращает обещание. async/await — это просто сахар поверх промисов, который на самом деле не делает код менее асинхронным. Следовательно, ваш компонентTrelloTester
все равно должен будет рассматривать функцию как обещание.