道具不断返回未定义

Question

I'm currently trying to create a table where each row has a checkbox that can be enabled or disabled. I have created 3 files:

• ChangeUserGroup.jsx - This is where the data is read from a json file
• UserGroupForm.jsx - Starts the form and passes the this.prop.permissions on to the next file, which contains the table and the checkboxes.
• TableShowPermissions.jsx - Contains the table and the problematic function + checkbox

I would like for the data in the ChangeUserGroup.jsx state(called groupDetails.permissions ) to control if the checkbox for the given permission is initialized with "defaultChecked". But i am getting the following error:

The files contain the following:

ChangeUserGroup.jsx

import React, { Component } from 'react';
import { Helmet } from 'react-helmet';

import { Container, Row, Col, Card, CardHeader, CardBody, Table, Button } from 'reactstrap';

import jsonData from '_testdata/userGroups';
import LoadingIcon from '_components/LoadingIcon';
import UserGroupForm from '_components/UserGroupForm';

class ChangeUserGroup extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
            userGroupId: 0,
            groupDetails: []
        }

    }

    componentDidMount() {
        this.setState({ isLoading: true });

        const { userGroupId } = this.props.match.params

        this.setState({
            userGroupId: userGroupId
        });

        jsonData.userGroups.filter((a) => a.id.toString() === userGroupId).map((b) => this.setState({
            groupDetails: b,
            isLoading: false
        }));
    }

    render() {

        const { groupDetails, isLoading } = this.state;

        if (isLoading) {
            return <LoadingIcon />;
        }

        return (
            <>
                <Helmet>
                    <title>{global.siteName + " - Brugergrupper"}</title>
                </Helmet>

                <main>
                    <section className="section section-shaped section-lg">

                        <Container>
                            <Row className="justify-content-center">
                                <Col lg="12">
                                    <Card className="bg-secondary shadow border-0">
                                        <CardHeader className="bg-white">
                                            <h1 className="text-center">{groupDetails.name}</h1>

                                        </CardHeader>
                                        <CardBody className="px-lg-5 py-lg-5">

                                            <UserGroupForm 
                                                id={groupDetails.id} 
                                                groupName={groupDetails.name} 
                                                position={groupDetails.position}
                                                permissions={groupDetails.permissions} />

                                        </CardBody>

                                    </Card>
                                </Col>
                            </Row>
                        </Container>
                    </section>
                </main>
            </>
        );
    }
}

export { ChangeUserGroup };

UserGroupForm.jsx

import React, { Component } from 'react';

import { Form } from "reactstrap";

import CustomFormInput from '_components/FormStuff/CustomFormInput';
import TableShowPermissions from '_components/UserGroups/TableShowPermissions';

class UserGroupForm extends Component {

    render() {

        const { id, groupName, position, permissions } = this.props;


        return (
            <Form>
                <CustomFormInput pLabel="Gruppe navn" pIcon="fa-user" pType="text" pShowLabel="on" pValue={groupName} />
                <CustomFormInput pLabel="Gruppe position" pIcon="fa-user" pType="text" pShowLabel="on" pValue={position} />
                <hr />
                <TableShowPermissions 
                    thePermissions={permissions} />
            </Form>

        );
    }
}

export default UserGroupForm;

TableShowPermissions.jsx

import React, { Component } from 'react';

import jsonData from 'UserPermissions';

import { Table, Button } from "reactstrap";

class TableShowPermissions extends Component {

    constructor(props) {
        super(props);

        this.checkIfPermissionAdded = this.checkIfPermissionAdded.bind(this);
    }

    checkIfPermissionAdded(checkPerm) {
        const { thePermissions } = this.props;

        thePermissions.split('|').map(permC => {
            //console.log(checkPerm + " -- " + permC)
            if (checkPerm === permC) {
                return true;
            }
        });
        return false;
    }

    render() {

        return (

            <Table className="align-items-center table-bordered" responsive>
                <thead className="thead-light">
                    <tr>
                        <th scope="col">Permission navn</th>
                        <th scope="col">Beskrivelse</th>
                        <th scope="col" />
                    </tr>
                </thead>
                <tbody>

                    {jsonData.permissions.map(perm => (
                        <tr key={perm.id}>
                            <th scope="row">
                                {perm.permission}
                            </th>

                            <td>
                                {perm.description}
                            </td>

                            <td className="text-right">
                                <label className="custom-toggle">
                                    <input type="checkbox" defaultChecked={this.checkIfPermissionAdded(perm.permission)} />
                                    <span className="custom-toggle-slider rounded-circle" />
                                </label>
                            </td>
                        </tr>
                    ))}

                </tbody>
            </Table>

        );
    }
}

export default TableShowPermissions;

JSON DATA

{
    "userGroups": [
        {
            "id": 1,
            "name": "Administrator",
            "position": "Admin",
            "permissions": "ADMIN_ROOT|"
        },
        {
            "id": 2,
            "name": "Moderator",
            "position": "Mod",
            "permissions": "ADMIN_SETTINGS_GENERAL|ADMIN_CASES_SEEALL|ADMIN_SETTINGS_CATEGORIES"
        },
        {
            "id": 3,
            "name": "Supporters",
            "position": "Supporter",
            "permissions": "ADMIN_CASES_SEEALL|"
        }
    ]
}

Any help would be appreciated: :)

Answer 1

If after a few react renders you do have the value, it most likely means it just isn't there yet in the first renders (this can happen if you are getting the data from a request) .

You can either add an if condition to only run the split when thePermissions exist or add a default value to it.

    checkIfPermissionAdded(checkPerm) {
        const { thePermissions } = this.props;

        if (thePermissions) {
          thePermissions.split('|').map(permC => {
              //console.log(checkPerm + " -- " + permC)
              if (checkPerm === permC) {
                return true;
              }
          });
        }

        return false;
    }

or

    checkIfPermissionAdded(checkPerm) {
        const { thePermissions = '' } = this.props;

        thePermissions.split('|').map(permC => {
            //console.log(checkPerm + " -- " + permC)
            if (checkPerm === permC) {
                return true;
            }
        });
        return false;
    }

It is possible that none is what you desire in your code but it might help you out knowing why it is happening.

Answer 2

Initialize your Loading initial state as true. Set your state in the constructor like this:

constructor(props) {
    super(props);

    this.state = {
        isLoading: true,
        userGroupId: props.match.params,
        groupDetails: []
    }
}

Remove the first two setState from your componentDidMount. Each time a setState is called the render fucntion is called.