React Promise не вернет значение

При попытке выполнить мое обещание я получаю сообщение об ошибке «Объекты недействительны в качестве дочернего элемента 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;
GetCardsFromBoard возвращает обещание. async/await — это просто сахар поверх промисов, который на самом деле не делает код менее асинхронным. Следовательно, ваш компонент TrelloTester все равно должен будет рассматривать функцию как обещание.
Nick 25.12.2020 05:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
3 841
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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));
Ответ принят как подходящий

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;

Другие вопросы по теме