从嵌套的JSON文件中为react状态分配值时出现问题

Question

我创建的目的是从Material UI中选择组件，一个用于制造，另一个用于汽车模型。第一个选择为make指定新状态，但我在指定模型时遇到问题，该模型是对象内部的数组。

这是JSON数据

[
{
"value": "ACURA",
"title": "Acura",
"models": [
{
"value": "CL_MODELS",
"title": "CL Models (4)"
},
{
"value": "2.2CL",
"title": " - 2.2CL"
},

]
},
{
"value": "ALFA",
"title": "Alfa Romeo",
"models": [
{
"value": "ALFA164",
"title": "164"
},
{
"value": "ALFA8C",
"title": "8C Competizione"
},
{
"value": "ALFAGT",
"title": "GTV-6"
},
{
"value": "MIL",
"title": "Milano"
},
{
"value": "SPID",
"title": "Spider"
},
{
"value": "ALFAOTH",
"title": "Other Alfa Romeo Models"
}
]
},
{
"value": "AMC",
"title": "AMC",
"models": [
{
"value": "AMCALLIAN",
"title": "Alliance"
},
{
"value": "CON",
"title": "Concord"
},
{
"value": "EAGLE",
"title": "Eagle"
},
{
"value": "AMCENC",
"title": "Encore"
},
{
"value": "AMCSPIRIT",
"title": "Spirit"
},
{
"value": "AMCOTH",
"title": "Other AMC Models"
}
]
},
//more date here
]

在我的JS文件中，我从JSON文件导入，如：import Cars from "./../../lib/cars.json";。

这是JS文件中的一些代码，要在其中选择品牌和型号。

const [make, setMake] = React.useState("");
const [model, setModel] = React.useState("");

//assign make
const handleMakeChange = (event) => {
setMake(event.target.value);
console.log("MAKE: ", event.target.value);
};

//assign model
const handleModelChange = (event) => {
setModel(event.target.value);
console.log("MODEL: ", event.target.value);
};

//some code here

{/* Make form */}
<FormControl className={classes.formControl}>
<InputLabel id="make-controlled-open-select-label">
Select make
</InputLabel>
<Select
labelId="make-controlled-open-select-label"
id="make-controlled-open-select"
name="make"
open={openMake}
onClose={handleMakeClose}
onOpen={handleMakeOpen}
value={make}
onChange={handleMakeChange}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
{Cars.map((item) => (
<MenuItem key={item.value} value={item.title}>
{item.title}
</MenuItem>
))}
</Select>
</FormControl>

{/* Model form */}
<FormControl className={classes.formControl}>
<InputLabel id="model-controlled-open-select-label">
Select model
</InputLabel>
<Select
labelId="model-controlled-open-select-label"
id="model-controlled-open-select"
name="model"
open={openModel}
onClose={handleModelClose}
onOpen={handleModelOpen}
value={model}
onChange={handleModelChange}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
{Cars.map((item) => (
<p key={item.value}>
{item.models.map((car) => (
<MenuItem key={car.value} value={car.title}>
{car.title}
</MenuItem>
))}
</p>
))}
</Select>
</FormControl>

我通常得到模型状态的undfined或Material-UI: A component is changing the controlled value state of Select to be uncontrolled. Elements should not switch from uncontrolled to controlled (or vice versa).。我不确定问题是在我映射模型的方式上还是在其他方面。

Answer 1

您在某处使用<p>标记吗？它实际上是在更改时引起问题的。请尝试下面的Model Select代码。

<Select
labelId="model-controlled-open-select-label"
id="model-controlled-open-select"
name="model"
open={openModel}
onClose={handleModelClose}
onOpen={handleModelOpen}
value={model}
onChange={handleModelChange}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
{Cars.map(item => (
item.models.map(car => (
<MenuItem key={car.value} value={car.title}>
{car.title}
</MenuItem>
))
))}
</Select>