我正在嘗試使用反應材料 ui 中的地圖在選擇框中顯示資料陣列，并得到TypeError: Cannot read properties of undefined (reading 'map') for the following code，任何關于我的代碼有什么問題的幫助。下面是我要顯示的陣列：
"secondClassCalmPrices":[["Kan ej ombokas","431","SEK","F?retagspris"],["Kan ombokas","525","SEK","F?retagspris"],["Kan ?terbetalas","724","SEK","F?retagspris"]]
材質ui選擇代碼：
<Select
labelId="demo-simple-select-standard-label"
id="demo-simple-select-standard"
value={props.legs.secondClassCalmPrices}
label="ticket type"
variant="standard"
className="calm-class-select"
>
{props.legs.secondClassCalmPrices.map((info) => {
return <MenuItem>{info}</MenuItem>;
})}
</Select>
uj5u.com熱心網友回復：
在這些情況下，最常見的錯誤是組件已被渲染，并且在幾毫秒后加載了道具。因此，組件第一次嘗試渲染Select組件時，道具尚未初始化，您會看到此錯誤。
在這種情況下，如果道具被填充延遲，你應該像這樣使用
{props.legs && props.legs.secondClassCalmPrices ?
<Select
labelId="demo-simple-select-standard-label"
id="demo-simple-select-standard"
value={props.legs.secondClassCalmPrices}
label="ticket type"
variant="standard"
className="calm-class-select"
>
{props.legs.secondClassCalmPrices.map((info) => {
return <MenuItem>{info}</MenuItem>;
})}
</Select>
: null}
uj5u.com熱心網友回復：
您可以使用可選鏈接來解決此問題
<Select
labelId="demo-simple-select-standard-label"
id="demo-simple-select-standard"
value={props.legs.secondClassCalmPrices}
label="ticket type"
variant="standard"
className="calm-class-select"
>
{props?.legs?.secondClassCalmPrices?.map((info) => {
return <MenuItem>{info}</MenuItem>; //needs to be modified
})}
</Select>
另外，您不能在 JSX 元素內渲染陣列。您可能需要使用 map 函式兩次以使用“secondClassCalmPrices”呈現 JSX。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/496438.html
標籤：javascript 反应 材料-ui
上一篇：回應預檢請求的Cors問題