我试图创建一个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>
);
}
哦,还有,我正在做的实际项目更复杂,我只是认为像这样的简化版本会更容易理解。我试图删去任何不重要的细节。
可能是因为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>
);
}