Я пытаюсь создать экран «разрешения роли». Вот пример кода:
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 не является функцией.
источник ошибки: <Checkbox value="1000" проверено = {permissions.includes("1000")} onChange = {onChange}>Читать
Я думаю, что тип «разрешений» меняется из-за setUsersPermissions(tempArray); линия.
Как я могу исправить ошибку.
PS: Я новичок в реагировании.js и не уверен, что это правильный способ сделать это. Буду признателен, если вы порекомендуете ресурсы о ролях и разрешениях.
То, что вы хотите, может быть setUsersPermissions([...permissions, e.target.value])
Что сказал Конрад. также не используйте push для изменения состояния. Передайте permissions.concat(e.target.value) установщику.





Короче говоря, проблема возникает из-за прямого изменения состояния. Я создал проект codeandbox с вашим кодом, и теперь он должен работать:
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;
permissions.push(e.target.value)возвращает число