我正在尝试创建一个“角色权限”屏幕。 这是示例代码:
import React, { useEffect, useState } from "react";
import { Form, Checkbox, Collapse, Row } from "antd";
function RolePermissions() {
const [permissions, setUsersPermissions] = useState([]);
const onChange = (e) => {
if (e.target.checked) {
if (!permissions.includes(e.target.value)) setUsersPermissions(permissions.push(e.target.value));
} else {
var tempArray = permissions.filter((item) => item !== e.target.value);
setUsersPermissions(tempArray);
}
};
//prettier-ignore
const items = [
{
key: "1000",
label: "Person",
children: (
<>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1000" checked={permissions.includes("1000")} onChange={onChange}>Read</Checkbox></Row>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1001" checked={permissions.includes("1001")} onChange={onChange}>Write</Checkbox></Row>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1002" checked={permissions.includes("1002")} onChange={onChange}>Delete</Checkbox></Row>
</>
),
},
{
key: "1100",
label: "Company",
children: (
<>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1100" checked={permissions.includes("1100")} onChange={onChange}>Read</Checkbox></Row>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1101" checked={permissions.includes("1101")} onChange={onChange}>Write</Checkbox></Row>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1102" checked={permissions.includes("1102")} onChange={onChange}>Delete</Checkbox></Row>
</>
),
},
];
useEffect(() => {
setUsersPermissions(["1000", "1001", "1100"]);
}, []);
return (
<Form>
<Collapse items={items} defaultActiveKey={["1000", "1100"]}></Collapse>
</Form>
);
}
export default RolePermissions;
取消勾选有效,但再次勾选时失败。 错误是:permissions.includes 不是一个函数
错误来源:
我认为“权限”的类型正在改变,因为 setUsersPermissions(tempArray);线。
如何修复该错误。
ps:我是react.js 的新手,不确定这是否是正确的方法。 如果您能推荐有关角色和权限的资源,我将不胜感激。
简而言之,问题是因为直接修改状态而出现的。我已经使用您的代码创建了一个codesandbox项目,现在应该可以工作了:
https://codesandbox.io/p/sandbox/array-includes-8gs4zw
我所做的主要更改是为所有数组操作创建一个
newPermissions
数组,然后使用此修改后的对象更新状态
希望这段代码能够解决您的问题
import React, { useEffect, useState } from "react";
import { Form, Checkbox, Collapse, Row } from "antd";
function RolePermissions() {
const [permissions, setUsersPermissions] = useState([]);
const onChange = (e) => {
if (e.target.checked) {
if (!permissions.includes(e.target.value))
setUsersPermissions((prev) => {
return [...prev, e.target.value];
});
} else {
setUsersPermissions((prev) =>
prev.filter((item) => item !== e.target.value)
);
}
};
//prettier-ignore
const items = [
{
key: "1000",
label: "Person",
children: (
<>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1000" checked={permissions.includes("1000")} onChange={onChange}>Read</Checkbox></Row>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1001" checked={permissions.includes("1001")} onChange={onChange}>Write</Checkbox></Row>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1002" checked={permissions.includes("1002")} onChange={onChange}>Delete</Checkbox></Row>
</>
),
},
{
key: "1100",
label: "Company",
children: (
<>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1100" checked={permissions.includes("1100")} onChange={onChange}>Read</Checkbox></Row>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1101" checked={permissions.includes("1101")} onChange={onChange}>Write</Checkbox></Row>
<Row style={{ paddingBottom: 5 }}><Checkbox value="1102" checked={permissions.includes("1102")} onChange={onChange}>Delete</Checkbox></Row>
</>
),
},
];
useEffect(() => {
setUsersPermissions(["1000", "1001", "1100"]);
}, []);
return (
<Form>
<Collapse items={items} defaultActiveKey={["1000", "1100"]}></Collapse>
</Form>
);
}
export default RolePermissions;