React Promise 不会返回值答案

【问题标题】：React Promise will not return a valueReact Promise 不会返回值
【发布时间】：2021-04-03 07:26:00
【问题描述】：

在尝试解决我的承诺时，我收到错误消息“对象作为 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;

【问题讨论】：

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

标签： javascript node.js reactjs rest node-fetch

【解决方案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;

【讨论】：

【解决方案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));

【讨论】：