我有一個物件
{
"id": 1,
"collectionName": "dsa",
"collectionItemsID": [
"ad",
"deneme1"
],
"ownerOfCollection": "117961395738439786389",
"createdAt": "2022-06-16T12:54:52.146Z",
"updatedAt": "2022-06-16T12:54:52.146Z"
}
當我在ReactJS中像那樣推到前面時
{collection.collectionItemsID}
我得到了加入的輸出。
附加素1
它需要分開。我不想單獨使用 javascript。我需要學習如何正確地做。我想我需要使用 Object.keys 但我用這種方式失敗了。
如何在 ReactJS 中映射 collectionItemsID？
這是我想實作物件輸出的示例方式
{data.map((item, i) => (
<tr key={i}>
<td>
<input
id={item.user_id}
type="checkbox"
value={item.user_id}
onChange={handleChange}
checked={isChecked}
/>
</td>
<td>{item.user_id}</td>
<td>{item.user_name}</td>
<td className="isbanned">{item.isbanned}</td>
<td>{item.registration_date}</td>
<td>{item.last_login}</td>
</tr>
))}
解決方案
<div>
{Object.keys(collection).length > 0 ? <div>
<h1>{collection.name}</h1>
<p>{collection.description}</p>
{collection.collectionItemsID.map(function (itemID) {
return <a href={`/${itemID}`}>{itemID}</a>
})}
</div> : <p>Loading...</p>}
</div>
uj5u.com熱心網友回復：
解決方案
如果你想讓每個條目collectionItemsID都有自己的鏈接，你需要使用map陣列的方法
collection.collectionItemsID.map(function(itemID) {
return <a href={`/${itemID}`}>{itemID}</a>
})
解釋
從方法的檔案map
map() 方法創建一個新陣列，其中填充了在呼叫陣列中的每個元素上呼叫提供的函式的結果。
建議
- 您應該始終以復數形式命名您的串列屬性，而不是
collectionItemsID應該collectionItemIDs向任何閱讀它的人表明它可能具有多個值。 - 您也不應該將單詞添加
collection到屬性中，因為物件本身就是一個集合。例如它應該是
{
"id": 1,
"name": "dsa",
"itemIds": [
"ad",
"deneme1"
],
"owner": "117961395738439786389",
"createdAt": "2022-06-16T12:54:52.146Z",
"updatedAt": "2022-06-16T12:54:52.146Z"
}
這樣，當您有一個變數保存物件時，代碼變為
var collection = {....}
collection.name // dsa
collection.owner // 117961395738439786389
collection.itemIds // ["ad","deneme1"]
uj5u.com熱心網友回復：
我想你可能正在尋找的是...
<a href={`/${collectionItemsID.join(' ')}`}>
uj5u.com熱心網友回復：
這是我的問題的答案
<div>
{Object.keys(collection).length > 0 ? <div>
<h1>{collection.name}</h1>
<p>{collection.description}</p>
{collection.collectionItemsID.map(function (itemID) {
return <a href={`/${itemID}`}>{itemID}</a>
})}
</div> : <p>Loading...</p>}
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/497318.html
標籤：javascript 反应