React Promise 不会返回值

Posted 2023-03-14

【中文标题】React Promise 不会返回值

【英文标题】：React Promise will not return a value

【发布时间】：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。

【参考方案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));