React Material Ui动态构建的菜单onClose没有得到函数内部变量的引用

Question

我正在创建一个应用程序，并决定基于一些JSON动态构建设置菜单。

{
catagories: [
{
name: "General",
index: 1,
items: [{
name: "Dark Mode",
index: 1,
type: "bool",
value: false,
}],
},
{
name: "Output",
index: 2,
items: [{
name: "Add Quotes",
index: 1,
type: "bool",
value: false,
},
{
name: "Escape Spaces",
index: 2,
type: "bool",
value: false,
}],
},
]
}

这个json然后由这个脚本在函数组件中处理。当前没有使用索引和类型属性。

function SideMenuSettings(props) {
const { changeSettings } = props; //function that actully changes the settings
const { settings } = props; // object that contains settings to load the ui with
let rows = []
let cat = settings.catagories;
for(var i = 0; i < cat.length; i++) {
rows.push(<Typography variant="h5">{cat[i].name}</Typography>);
for(var j = 0; j < cat[i].items.length; j++) {
let name = cat[i].items.name;

rows.push(
<FormControlLabel
value={name}
control={<Switch color="primary" />}
label={name}
labelPlacement="start"
onChange={() => {
changeSettings({
name: name,
value: event.target.value,
});
}}
/>
);
}
}
return (
<FormControl component="fieldset">
<FormGroup aria-label="position" column>
{rows}
</FormGroup>
</FormControl>
);
}

这主要工作，除了我需要有一个onClick函数从它生成的开关。运行时，name未定义。我尝试使用一个函数来返回一个运行"更改设置"函数的函数，但它不起作用。如有任何帮助，不胜感激。

Answer 1

只是猜测，因为没有代码片段就没有办法测试，但我正在查看代码，您正在使用event.target.value，但您没有通过event，我不明白。名字不应该是name: event.target.name吗?