无法读取相关下拉列表中未定义错误的属性

Question

我正在尝试制作依赖下拉列表。在第一个菜单中我选择汽车品牌。在第二个菜单中，我应该只看到所选品牌的型号。在函数 selectBrand 中，我尝试设置 selectedBrand 的新值，并将所选品牌的模型设置为模型数组，但在第二个 setAdData 中，我得到未捕获的类型错误：无法读取未定义的属性（读取“模型”）。我该如何解决这个问题？

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"
      ]
   }
],                                                                              
}

Answer 1

这是因为，如果用户选择的汽车品牌在 data.cars 中不存在，并且 .find() 返回 undefined，那么您尝试读取 undefined 的 .models ，这会给您一个错误

一种选择是您可以使用三元运算符来检查 find 是否返回数组，然后获取如下所示的模型（替换 <代码>宝马与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 : []);