嘿，我遇到了一個問題，我使用 MUI 選擇功能來選擇一個國家。不知道為什么當我選擇國家時它會改變它的值，但是在選擇框內它不顯示任何東西。
const [selectedCountry, setSelectedCountry] = useState({});
const handleChangeCountry = (event) => {
setCountryValue(event.target.value);
};
<FormControl sx={{ m: 1, width: 400 }}>
<InputLabel id="country-label">Country</InputLabel>
<Select
labelId="country-label"
id="country"
value={selectedCountry}
onChange={handleChangeCountry}
MenuProps={MenuProps}
>
{countryList.map((data,index) => (
<MenuItem
key={data.name}
value={data}
>
{data.name}
</MenuItem>
))}
</Select>
<p className="text-black">{selectedCountry.name}</p>
<p className="text-black">{JSON.stringify(selectedCountry, null, 2)}</p>
如您所見，藍色背景色文本下方顯示我選擇的國家，但在選擇框中未顯示。不知道我在哪里做錯了。感謝您幫助推進。
uj5u.com熱心網友回復：
您的useState鉤子呼叫了 set 函式，setSelectedCountry但在handleChangeCountry您嘗試使用setCountryValue不會selectedCountry根據您提供的代碼更新時，請按如下方式更改：
const [selectedCountry, setSelectedCountry] = useState({});
const handleChangeCountry = (event) => {
setSelectedCountry(event.target.value);
};
另外，它似乎selectedCountry應該是一個物件？在這種情況下，請嘗試將 Select 值傳遞為selectedCountry.name：
<Select
labelId="country-label"
id="country"
value={selectedCountry.name}
onChange={handleChangeCountry}
MenuProps={MenuProps}
>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/442126.html