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

Question

我试图创建一个react应用程序，它将获得并显示新的报价，每次你按下" get quote"按钮。我正在使用API获取这些引号。

我面临的主要问题是我想要一个"Loading…"消息，因为api有时会很慢。

例如，如果用户按下"Get "按钮两次，前两个新字段应该出现"Loading…"，然后一旦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中的useEffect将loading设置为false。Jsx，你可以试试这样

import React, { useState, useEffect } from 'react';
export default function QuoteItem({ quote }) {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(setLoading(false), 5000)
}, []);
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>
);
}