无法读取依赖下拉列表中未定义错误的属性
无法读取依赖下拉列表中未定义错误的属性
提问于 2022-03-22 14:04:05
我试着做一个依赖下拉列表。在第一个菜单中，我选择了汽车品牌。在第二个菜单中，我应该只看到所选品牌的型号。在函数selectBrand中，我试图设置selectedBrand的新值，并将选定品牌的模型设置为模型数组，但在第二个setAdData中，我得到了未定义的TypeError:无法读取未定义的属性(读取“模型”)。我怎么才能解决呢？
const [adData, setAdData] = useState({
selectedBrand: "",
models: [],
selectedModel: "",
productionYear: "",
countryOfOrigin: "",
typeOfFuel: "",
bodyType: "",
amountOfDoors: "",
typeOfGearbox: "",
typeOfDrive: "",
color: "",
typeOfColor: "",
description: "",
vin: "",
engineCapacity: "",
mileage: "",
horsePower: "",
price: "",
creator: "",
image: "",
});
const selectBrand = (e) => {
setAdData({...adData, selectedBrand: e.target.value});
setAdData({...adData, models: data.cars.find(car => car.brand===e.target.value).models})
}
return (
<Paper className={classes.paper}>
<form autoComplete="off" noValidate className={`${classes.root} ${classes.form}`} onSubmit={handleSubmit}>
<Typography variant="h6">Brand</Typography>
<Select fullWidth value={adData.selectedBrand} onChange={selectBrand.bind(this)
}>
{data.cars.map((car, key) => {
return <MenuItem key={key} value= {car}>{car.brand}</MenuItem>
})}
</Select>
<Typography variant="h6">Model</Typography>
<Select fullWidth value={adData.selectedModel} onChange={(e) =>
setAdData({...adData, selectedModel: e.target.value})
}>
{
adData.models.map((model, key) => {
return <MenuItem key={key} value={model}>{model}</MenuItem>
})
}
</Select>
<Button className={classes.buttonSubmit} variant="contained" color="primary" size="large" type="submit" fullWidth>Dodaj</Button>
<Button variant="contained" color="secondary" size="large" onClick={clear} fullWidth>Anuluj</Button>
</form>
</Paper>
);data.json我有车和模型
{
"cars":[
{
"brand":"BMW",
"models":[
"Seria 1",
"Seria 2",
"Seria 3",
"Seria 4",
"Seria 5",
"Seria 6",
"Seria 7",
"Seria 8"
]
},
{
"brand":"Audi",
"models":[
"A1",
"A2",
"A3",
"A4",
"A5",
"A6",
"A7",
"A8"
]
}
],
}回答 1
Stack Overflow用户
发布于 2022-03-22 14:14:20
这是因为如果用户选择的汽车品牌在data.cars中不存在，并且.find()返回undefined，那么您可以尝试读取.models of undefined，这会给出一个错误
一种选择是，可以有一个三元操作符来检查find是否返回一个数组，然后得到如下所示的模型(将BMW替换为e.target.value )
data.cars.find(car => car.brand === "BMW") ? data.cars.find(car => car.brand === "BMW").models : []概念工作例如
var data = {
"cars": [{
"brand": "BMW",
"models": [
"Seria 1",
"Seria 2",
"Seria 3",
"Seria 4",
"Seria 5",
"Seria 6",
"Seria 7",
"Seria 8"
]
},
{
"brand": "Audi",
"models": [
"A1",
"A2",
"A3",
"A4",
"A5",
"A6",
"A7",
"A8"
]
}
]
}
console.log(data.cars.find(car => car.brand === "sd") ? data.cars.find(car => car.brand === "sd").models : []);
console.log(data.cars.find(car => car.brand === "BMW") ? data.cars.find(car => car.brand === "BMW").models : []);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71573408
复制相关文章
相似问题
腾讯云开发者
