不可变更新React挂钩数组对象

Question

我成功地更改了菜单状态，使用了钩子，但。。。

const [menu, setMenu] = useState([
{
parent: 'User',
permission: false,
children:[
{name: 'Vendor', permission: false, readonly: true},
{name: 'Client', permission: false, readonly: true},
{name: 'User', permission: false, readonly: true},
]
}
]);
const toggleParent = (key) => {
let data = {...menu};
data[key].permission = !data[key].permission
setMenu(data);
};

最后在映射函数中出错，它说：

menu.map不是函数

这里是映射函数：

{menu.map((value, key) => (
<Switch
checked={value.permission}
onChange={() => toggleParent(key)}
color="primary"
name="checkedB"
inputProps={{ 'aria-label': 'primary checkbox' }}
/>
))}

Answer 1

我认为问题来自{...menu}。通常，当不在数组上调用.map()时会发生此错误。您需要一个[]。

尝试以下操作：

const toggleParent = (key) => {
let data = [...menu];
data[key].permission = !data[key].permission;
setMenu(data);
};

我希望这能有所帮助！

Answer 2

您的代码中有一个问题，您的菜单是一个数组，您正在为其分配一个对象并在其上使用映射。

以下是正确的操作方法

const toggleParent = (key) => {
let data = [...menu];
data[key].permission = !data[key].permission
setMenu(data);
};