在 React 中等待 API 请求时呈现多个加载消息

Question

我正在尝试创建一个 React 应用程序，它会在您每次按下“获取报价”按钮时获取并显示新报价。我正在使用 API 获取这些报价。

我面临的主要问题是我想在每个这样的引号框上显示“正在加载...”消息，因为 API 有时会很慢。

因此，例如，如果用户按下“获取报价”按钮两次，则前 2 个新字段应显示为“正在加载...”，然后一旦 API 响应，这些“正在加载...”消息将被替换与实际报价。

我怎样才能执行这样的事情？

这是我目前拥有的代码。它确实添加了新引号，但它从不显示“正在加载...”消息，即使它看起来应该如此。

QuotesLogic.jsx

import React, { useState, useEffect } from 'react';
import QuoteList from './QuoteList';

export default function QuotesLogic() {
  const [quotes, setQuotes] = useState([]);

  useEffect(() => {
    fetchQuote();
  }, []);

  const fetchQuote = async () => {
    const response = await fetch('https://api.quotable.io/random');
    const data = await response.json();
    await new Promise((resolve) => setTimeout(resolve, 1000))  // 1 sec wait for testing
    setQuotes([...quotes, data]);
    await new Promise((resolve) => setTimeout(resolve, 1000))  // 1 sec wait for testing
  };

  return (
    <section>
      <button onClick={fetchQuote}>Generate new</button>
      <QuoteList quotes={quotes} />
    </section>
  );
}

QuoteList.jsx：

import React from 'react';
import QuoteItem from './QuoteItem';

export default function QuoteList({ quotes }) {
  return (
    <div>
      {quotes.map((quote, index) => (
        <QuoteItem key={index} quote={quote} />
      ))}
    </div>
  );
}

QuoteItem.jsx:

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

export default function QuoteItem({ quote }) {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(false);
  }, []);

  return (
    <div className='border border-green-500'>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div>
          <p>{quote.content}</p>
          <p className='text-right'>{quote.author}</p>
          <p>insert other quote attributes</p>
        </div>
      )}
    </div>
  );
}

哦还有，我实际做的项目比较复杂，我只是觉得像这样的简化版本会更容易理解。我试图去掉任何不重要的细节。

Answer 1

可能是因为 QuoteItem.jsx 中的 useEffect 将 loading 设置为 false，你可以这样尝试

从“反应”中导入 React，{useState，useEffect}；

导出默认函数 QuoteItem({ quote }) { const [loading, setLoading] = useState(true);

useEffect(() => { setTimeout(setLoading(false), 5000)

}, []);

返回（ {正在加载？ (

加载中...

) : (

{引用.内容}

{quote.author}

插入其他报价属性

)} ); }