我正在努力在我的 React Typescript 專案中的陣列上的每個專案上使用鉤子。
不考慮使用鉤子的限制，代碼如下：
const forwardContractArray = useGetForwardArray()
interface ForwardResult {
token: string;
amount: number;
expiryTime: number;
}
const forwardResultArray: Array<ForwardResult> = []
for (let forwardAddress of forwardContractArray) {
const { token, amount, expiryTime} = useForwardInfo(forwardAddress)
forwardResultArray.push({token, amount, expiryTime})
}
由于在 for 回圈中運行鉤子的限制，因此不可能為此使用 for 回圈。
請有人指導我如何在 React 的范圍內實作這樣的功能？
提前致謝。
uj5u.com熱心網友回復：
React 首先是一個 UI 庫 - 因此，如果您想為陣列的每個元素顯示一些內容，那么您可以為每個專案擁有一個組件，并且在組件內部您可以使用單個鉤子
return (
<>
{ forwardContractArray
.map(item => <ItemDisplay key={item.token} item={item} />) }
</>
)
然后例如
function ItemDisplay({ item } : { item: ForwardResult }) {
const { token, amount, expiryTime} = useForwardInfo(item);
return (
<p>Whatever you want to show for this item</p>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/377280.html
上一篇：動態渲染多個SVG圖示