我從作為物件陣列的 API 獲取一些資料，并希望提取它們并解構它們，以便我可以使用它們在 React 中呈現組件。我已經取得了一些成就，但這樣我就不是 KISS 并且渲染它是為每個專案創建 6 次，所以我有 24div。
資料是這樣來的，“每小時”陣列有 48 個物件。我已經將陣列切片以僅使用六個作為我所需要的。
"hourly": [
{
"dt": 1618315200,
"temp": 282.58,
"feels_like": 280.4,
"pressure": 1019,
"humidity": 68,
"dew_point": 276.98,
"uvi": 1.4,
"clouds": 19,
"visibility": 306,
"wind_speed": 4.12,
"wind_deg": 296,
"wind_gust": 7.33,
"weather": [
{
"id": 801,
"main": "Clouds",
"description": "few clouds",
"icon": "02d"
}
],
"pop": 0
},
...
這就是我在回傳和部分標簽中得到的內容，它確實有效，但我認為這不是最好的方法，而且正確設定樣式也是一場噩夢，因為它每次創建六個專案：
<div className="weather-info-extra">
{shortedArr.map((i, index) => (
<div key={index}>
{new Date(i.dt * 1000).toLocaleTimeString([], {
timeZone: timezone,
hour: '2-digit',
minute: '2-digit',
hour12: true,
})}
</div>
))}
{shortedArr.map((i, index) => (
<div key={index}>{i.weather.map(w => w.description)}</div>
))}
{shortedArr.map((i, index) => (
<div key={index}>{i.temp} C</div>
))}
{shortedArr.map((i, index) => (
<div key={index}>
<p>Rain</p>
{i.pop}%
</div>
))}
</div>
我知道有一種非常明顯的方法是我缺少從陣列中獲取每個物件的方法，因此我可以更好地渲染它。
uj5u.com熱心網友回復：
你是對的，你可以更有效地做到這一點。您只需要映射一次。你可以使用一個片段來封裝多個元素，這個片段永遠不會被渲染，但允許你有多個子元素。
shortArray.map((data, index) => (
<React.Fragment key={index}>
<div>{data.time}</div>
<div>{data.weather}</div>
// anything else you want rendered
<React.Fragment />
));
您無需多次映射此陣列。
順便提一下，不需要鍵的片段可以寫成 JSX 中的空標簽：
<> /** React fragment code here */ </>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/364765.html