Javascript 道具继续返回未定义

我目前正在尝试创建一个表，其中每一行都有一个可启用或禁用的复选框。 我创建了3个文件：

• ChangeUserGroup.jsx-这是从json文件读取数据的地方
• UserGroupForm.jsx-启动表单并将this.prop.permissions传递到下一个文件，该文件包含表和复选框
• TableShowPermissions.jsx-包含表和有问题的函数+复选框

我想让ChangeUserGroup.jsx状态（称为groupDetails.permissions）的数据控制给定权限的复选框是否初始化为“defaultChecked”。但我得到了以下错误：

这些文件包含以下内容：

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 };

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;

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;

---

任何帮助都将不胜感激！：）

如果在几个react渲染之后您确实拥有该值，则很可能意味着它在第一个渲染中还不存在（如果您从请求中获取数据，则可能发生这种情况）

您可以添加

if

条件，使其仅在

权限存在时运行拆分，也可以向其添加默认值

checkIfPermissionAdded（checkPerm）{
const{thePermissions}=this.props；
如果（许可证）{
permissions.split（“|”）.map（permC=>{
//console.log（checkPerm+“--”+permC）
if（checkPerm==permC）{
返回true；
}
});
}
返回false；
}

或

checkIfPermissionAdded（checkPerm）{
const{thePermissions=''}=this.props；
permissions.split（“|”）.map（permC=>{
//console.log（checkPerm+“--”+permC）
if（checkPerm==permC）{
返回true；
}
});
返回false；
}

代码中可能没有您想要的内容，但这可能有助于您了解发生这种情况的原因。
将加载初始状态初始化为true。在构造函数中设置您的状态，如下所示：

constructor(props) {
    super(props);

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

从组件D安装中卸下前两个setState。每次调用setState时，都会调用渲染功能
 而且新的反应是如此专横；）我不支持react，但也许我能帮上忙，尝试console.log到UserGroupForm，看看权限值是否正确
const{id，groupName，position，permissions}=this.props；console.log（权限）groupDetails
@SpaceDogCS中有什么？它应该是字符串，因为它来自
this.props.match.params
。但是@AndersG可以做
String（userGroupId）
。我想是这样的，每次我尝试添加if语句时都会犯这个错误，但它所做的就是根本不呈现函数。。（好像它从来都不是“未定义的”。我认为问题在于如何从一个组件到另一个组件获取数据：）我也忘了注意，但是
return true
在映射内，就我所知，对于实际函数不会返回true，而是映射迭代。
constructor(props) {
    super(props);

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