Включает в себя не функцию

Я пытаюсь создать экран «разрешения роли». Вот пример кода:

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 и не уверен, что это правильный способ сделать это. Буду признателен, если вы порекомендуете ресурсы о ролях и разрешениях.

permissions.push(e.target.value) возвращает число
Konrad 23.04.2024 11:02

То, что вы хотите, может быть setUsersPermissions([...permissions, e.target.value])

Hao Wu 23.04.2024 11:03

Что сказал Конрад. также не используйте push для изменения состояния. Передайте permissions.concat(e.target.value) установщику.

DustInComp 23.04.2024 11:03
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
53
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Короче говоря, проблема возникает из-за прямого изменения состояния. Я создал проект 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;

Другие вопросы по теме