React中如何展示JSON数据 随机名言应用Promise对象报错怎么解决

错误根因 #

• 你编写的Quote函数直接返回了fetch生成的Promise对象，React无法将Promise类型作为可渲染的子元素，因此抛出对应报错。
• 组件渲染过程中不能直接返回异步请求的结果，需要通过React状态管理钩子存储异步返回的数据后再渲染。

修复方案 #

你可以将Quote组件改写为带状态的函数组件，在组件挂载时触发异步请求，拿到数据后更新状态再渲染内容，示例代码如下：

import { useState, useEffect } from 'react';

function Quote() {
  // 定义状态存储作者信息，初始值为加载提示
  const [author, setAuthor] = useState('加载中...');

  const getRandomAuthor = () => {
    const randomIndex = Math.floor(Math.random() * 103);
    fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
      .then(response => response.json())
      .then(responseJson => {
        setAuthor(responseJson.quotes[randomIndex].author);
      })
      .catch(error => {
        console.error(error);
        setAuthor('加载失败');
      });
  };

  // 组件首次挂载时触发数据拉取
  useEffect(() => {
    getRandomAuthor();
  }, []);

  return <>{author}</>;
}

如果你需要实现点击「New Quote」按钮刷新名言的功能，建议将状态提升到App组件统一管理，示例代码如下：

import { useState, useEffect } from 'react';

function App() {
  const [author, setAuthor] = useState('加载中...');

  const fetchRandomQuote = () => {
    const randomIndex = Math.floor(Math.random() * 103);
    fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
      .then(res => res.json())
      .then(resJson => {
        setAuthor(resJson.quotes[randomIndex].author);
      })
      .catch(err => {
        console.error(err);
        setAuthor('加载失败');
      });
  };

  // 首次加载时拉取数据
  useEffect(() => {
    fetchRandomQuote();
  }, []);

  return (
    <div id="quote-box">
      <div id="author">{author}</div>
      <button id="new-quote" onClick={fetchRandomQuote}>New Quote</button>
      <a href="twitter.com" id="tweet-quote">Tweet</a>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者DumDeeDum