我正在構建一個應用程式，用戶可以保存他發布的收藏資產以供出租......并在另一個名為收藏夾的頁面中觀看它們。
class Favorites extends Component {
state = {
cards: [],
};
async componentDidMount() {
const { data } = await userMethods.getUserFavorites();
const favoritesArray = data.favorites;
for (var cardId of favoritesArray) {
const { data } = await cardService.getFavoritesCards(cardId);
let arr = [];
arr.push(data);
console.log(arr);
this.setState({ cards: arr })
}
}
render() {
const { cards } = this.state;
console.log(cards);
return (
<div className="container" >
<PageHeader>My favorites</PageHeader>
<div className="row">
<div className="col-12 mt-4">
{cards.length > 0 && <p>This are the chosen one's...</p>}
</div>
</div>
<div className="row">
{cards.length > 0 &&
cards.map(card => <CardFavorite card={card} key={card._id} />)
}
</div>
</div>
);
}
}
export default Favorites;
在這個請求中 ===> const { data } = await userMethods.getUserFavorites(); 我得到一個帶有卡片 ID 的陣列 .. 我需要向一個端點發出另一個請求，該端點檢索具有給定 ID 的卡片......但是當我將它傳遞給子組件時，它只呈現給我一張卡片......請幫忙
uj5u.com熱心網友回復：
在 for 回圈中的每次迭代都會創建一個新的空陣列并將接收到的資料推送到該陣列并將其設定為狀態。下一次迭代，再次創建一個新的空陣列。
您應該首先獲取當前狀態并將新資料推送到它然后將其保存在狀態中
for (var cardId of favoritesArray) {
const { data } = await cardService.getFavoritesCards(cardId);
let arr = [...this.state.cards];
arr.push(data);
console.log(arr);
this.setState({ cards: arr })
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358736.html
上一篇：洗掉功能的Spring錯誤請求
下一篇：ajax提交后如何防止頁面重繪