Question

我目前正在尝试创建一个表格，其中每行都有一个可以启用或禁用的复选框。我已经创建了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 };

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数据

{
    "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|"
        }
    ]
}

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

Answer 1

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

您可以添加thePermissions条件以仅在存在checkIfPermissionAdded(checkPerm) { const { thePermissions } = this.props; if (thePermissions) { thePermissions.split('|').map(permC => { //console.log(checkPerm + " -- " + permC) if (checkPerm === permC) { return true; } }); } return false; }时运行拆分，也可以为其添加默认值。

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

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

或


    $(document).ready(function () {

      $.ajax("http://localhost:5000/config", function (data) {
         // Get initial values
         // Render values to Select options

      }) 

      $("#myButton").click(function () {
        // get selected value on click
        var selectedValue = 'foo'
        $.ajax({
          url: "http://localhost:5000/setServer",
          type: "POST",
          dataType: "json",
          data: { selectedValue: selectValue },
          success: function (res) {
            // on success, do what you need to do after data to server has been set.

          },
        });
      });
    });

代码中可能没有想要的东西，但是它可能会帮助您了解为什么会发生这种情况。

Answer 2

将您的Loading初始状态初始化为true。像这样在构造函数中设置状态：

constructor(props) {
    super(props);

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

从componentDidMount中删除前两个setState。每次调用setState时都会调用渲染功能。

道具不断返回未定义

2 个答案: