3 回答

TA貢獻(xiàn)1868條經(jīng)驗(yàn) 獲得超4個(gè)贊
您應(yīng)該使用使用異步結(jié)果設(shè)置的狀態(tài),而不是改變top100Array(然后由于.then某種原因從)返回它,從而強(qiáng)制重新渲染。用于等待每次提取完成。Promise.all
const [results, setResults] = useState();
const getData = i => fetch(dataUrlNoPage + i)
.then((res) => res.json())
.then((data) => {
if (data.errors) {
console.log(data.errors);
throw new Error(data.errors);
}
return data.results;
// Retrieve results only once, on mount:
useEffect(() => {
Promise.all(
Array.from({ length: 5 }, (_, i) => getData(i + 1))
)
.then((allResults) => {
setResults(allResults.flat());
})
.catch(handleErrors);
}, []);
然后渲染它:
<ul className="results">{results ? listItems(results) : null}</ul>
將 替換JSON.stringify為您想要將結(jié)果數(shù)組轉(zhuǎn)換為 JSX 元素的值。(也許你想要results.map(result => <span>result.title</span>),或者類(lèi)似的東西)

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊
不確定返回什么并且 for 循環(huán)不是最優(yōu)的,但你不妨直接在 jsx 中映射
<ul className='results'>
{top100Array.map((movie) => (
<li key={movie.id}>
<TopListCard movie={movie} />
</li>
))}
</ul>

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊
在我看來(lái)一切都很好。其實(shí)你并不需要回來(lái)top100Array
。我唯一能想到的是你在top100Array
填充項(xiàng)目之前渲染你的列表。
添加回答
舉報(bào)