React Promise 不会 return 一个值

Question

在尝试解决我的承诺时，我收到错误消息“对象作为 React 子对象无效（找到：[object Promise]”）。

在 GetCardsFromBoard() 中的 API 请求之后的 console.log 中，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.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

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));

Answer 2

GetCardsFromBoard returns 一个承诺。 async/await 只是承诺之上的糖分，实际上并没有使代码的异步性降低。因此，您的 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;

React Promise 不会 return 一个值

React Promise will not return a value

javascript

rest

node.js

reactjs

node-fetch