Next.js |无法从承诺对象返回值 [重复]答案

【问题标题】：Next.js | Can't return value from promise object [duplicate]Next.js |无法从承诺对象返回值 [重复]
【发布时间】：2021-03-26 15:41:30
【问题描述】：

你好。

我对 JS 和 React 比较陌生，所以请善待我。试图弄清楚这一点很长一段时间。

我有一个组件从 URL 解析 JSON，然后尝试从中返回一个值，因此可以将其呈现到 HTML 正文。

import GetQuote from './quoteparse/GetQuote';
import * as bodystyles from './styles/dumbbody';

export default function Dumbbody() {

    return (
        <>
            <bodystyles.quote>
                <GetQuote />
            </bodystyles.quote>       
        </>
    )
}

import React, { useState } from 'react';

const GetQuote = async() => {

    const [newQuote, setNewQuote] = useState('');
    
    const randomQuoteURI = "https://www.tronalddump.io/random/quote";
    const response = await fetch(randomQuoteURI);
    const data = await response.json()
        .then(function(result) {
            console.log(result.value);
            setNewQuote(result.value);
        })
    console.log(newQuote);

    return (
        <div>
            <p>
                {`${newQuote}`}
            </p>
        </div>
    )

}

export default GetQuote;

我收到以下错误：

【问题讨论】：

Jared 链接到的问题答案的第二部分应该适合您。

标签： javascript json reactjs next.js

【解决方案1】：

您使用的是 Next.js，所以我认为您也可以使用 next.js 提供的getInitialProps 提供数据获取，您可以查看official docs 了解更多信息！

const GetQuote = ({ quote }) => {
  
  return (
    <div>
      <p>
        {`${quote}`}
      </p>
    </div>
  )
}

GetQuote.getInitialProps = async (ctx) => {
  const randomQuoteURI = "https://www.tronalddump.io/random/quote";
  const response = await fetch(randomQuoteURI);
  const response = await response.json()
  return { quote: response.value }
}

【讨论】：

【解决方案2】：

您遇到的问题是因为您的 GetQuote 是一个异步/等待函数，它将返回一个 Promise 而不是 JSX（React 知道要呈现的 HTML 的对象表示）。为此，您可以将 fetch 语句放入一个函数中，并在组件呈现如下时使用 useEffect 运行该函数：

import React, { useState, useEffect } from 'react';

const GetQuote = async() => {
  const [newQuote, setNewQuote] = useState('');
  const randomQuoteURI = "https://www.tronalddump.io/random/quote";
  const getQuote = async () => {
    const response = await fetch(randomQuoteURI)
    const data = await response.json()
    setNewQuote(data)
  }
  
  useEffect(() => {
    getQuote()
  }, [])
  
  return (
    <div>
      <p>
        {`${newQuote}`}
      </p>
    </div>
  )
}
export default GetQuote;

您可以阅读更多关于 React 如何渲染组件 here、更多关于 JSX here、更多关于 React 组件的生命周期 here、async/await 如何工作 here 以及如何使用 async/等待 React here

【讨论】：