代码之家 › 专栏 › 技术社区 › wmash

react.createElement:类型无效(redux/react router?)

react-router react-redux reactjs javascript

0

wmash · 技术社区 · 7 年前

我知道这个问题已经问了好几次了:

…但这些都没有帮到我。我从这些问题/答案中得到的普遍共识是,这通常发生在 import / export 发出哪个 (查看我的代码库,这不是我的问题) .

我有三个部分: 认知语言学 ,请 列表组 和 邀请用户模式 . 认知语言学 是身份验证服务并重定向到 列表组 使用React路由器DOM <Redirect> . 然后呈现 邀请用户模式 点击一个按钮。这是我的密码 (重要的部分) :

认知语言学

render() {
    const { redirect } = this.state;

    if (redirect) {
        return <Redirect to={{
            pathname: redirect,
            state: {
                email: this.state.email
            }
        }}/>;
    }

    return (
        <div id="dialog-region">
            <div className="login-view">
                { !this.props.location.state.loginAuth &&
                    <CognitoMessage email={this.state.email}/>
                }
                <div id="login-logo">
                    <Image id="pimberly-logo" src={PimberlyLogo} responsive/>
                    <Image id="cognito-logo" src={CognitoLogo} responsive/>
                </div>
                <LoginForm handleLogin={this.handleLogin}/>
                <div className="checkbox forgottenReset">
                    <a id="reset-password" onClick={this.handlePasswordReset}>Forgotten password?</a>
                </div>
                <div className="checkbox forgottenReset">
                    <a id="resend-confirm" onClick={this.handleResend} href="#">Resend confirmation</a>
                </div>
                { this.state.err &&
                    <ErrorAlert err={this.state.err} />
                }
                { this.state.apiRes &&
                    <SuccessAlert res={this.state.apiRes} />
                }
                { this.state.resend &&
                    <InfoAlert email={this.state.email}/>
                }
            </div>
        </div>
    );
}

列表群组

import React, { Component } from "react";
import axios from "axios";
import { connect } from "react-redux";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Table, ButtonToolbar, Button } from "react-bootstrap";

// Selectors
import { getUser } from "../selectors/user";
import { getGroupByName } from "../selectors/group";

// Actions
import { setUsersGroupsPersist } from "../actions/user";

// Components
import ErrorAlert from "./ErrorAlert";
import ListUsersModal from "./ListUsersModal";
import InviteUsersModal from "./InviteUsersModal";

// Styles
import "../../css/login.css";

class ListGroups extends Component {
    constructor(props) {
        super(props);

        this.state = {
            groups: [],
            showModal: false,
            groupName: "",
            emailOfUser: props.location.state.email
        };

        this.handleRemoveInviteUsers = this.handleRemoveInviteUsers.bind(this);
        this.closeModal = this.closeModal.bind(this);

        this.props.setUsersGroupsPersist(this.state.emailOfUser);
    }

    handleRemoveInviteUsers(event) {
        const groupSelected = this.props.groups.find((group) => {
            return (group.name === event.currentTarget.dataset.groupName);
        });

        event.preventDefault();

        this.setState({
            groupAction: event.currentTarget.dataset.groupAction
        });

        return axios.post(`http://${process.env.BASE_API}/groups/users/list`, {
            groupName: groupSelected.name
        })
            .then((res) => {
                this.setState({
                    showModal: true,
                    users: res.data.Users
                });
            })
            .catch((err) => {
                this.setState({
                   apiErr: err
                });
            });
    }

    closeModal(event) {
        this.setState({
            showModal: false
        });
    }

    render() {
        const Modal = (this.state.groupAction === "remove") ? <ListUsersModal /> : <InviteUsersModal />;

        return (
            <>
                <div id="dialog-region">
                    <Table striped bordered condensed hover>
                        <thead>
                            <tr>
                                <th scope="col" className="col-name">Name</th>
                                <th scope="col" className="col-description">Description</th>
                                <th scope="col" className="col-created">Created</th>
                                <th scope="col" className="col-buttons"></th>
                            </tr>
                        </thead>
                        <tbody>
                            { this.props.groups.map(function(group, i) {
                                return <tr key={i}>
                                    <td>{ group.name }</td>
                                    <td>{ group.description }</td>
                                    <td>{ group.created }</td>
                                    <td>
                                        <ButtonToolbar>
                                            <Button bsStyle="primary" onClick={this.handleRemoveInviteUsers} data-group-name={group.name} data-group-action="invite">
                                                <FontAwesomeIcon icon="plus"/> Invite users
                                            </Button>
                                            <Button bsStyle="danger" onClick={this.handleRemoveInviteUsers} data-group-name={group.name} data-group-action="remove">
                                                <FontAwesomeIcon icon="trash"/> Remove users
                                            </Button>
                                        </ButtonToolbar>
                                    </td>
                                </tr>;
                            }, this)}
                        </tbody>
                    </Table>
                    { this.state.showModal &&
                        <Modal closeModal={this.closeModal}/>
                    }
                    { this.state.apiErr &&
                        <ErrorAlert err={this.state.apiErr} />
                    }
                </div>
            </>
        );
    }
}

const mapStateToProps = (state, props) => {
    const user = getUser(state, props.location.state.email);
    const groups = user.groups.map((groupName) => {
        return getGroupByName(state, groupName);
    });

    return {
        user,
        groups
    };
};

export default connect(
    mapStateToProps,
    { setUsersGroupsPersist }
)(ListGroups);

邀请用户modal.js

import React, { Component } from "react";
import axios from "axios";
import { connect } from "react-redux";
import { Modal, Button, FormGroup, FormControl, ControlLabel, Table } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import ErrorAlert from "./ErrorAlert";

export default class InviteUsersModal extends Component {
    constructor(props) {
        super(props);

        this.state = {
            currentEmail: "",
            emailsToInvite: []
        };

        this.handleInviteUser = this.handleInviteUser.bind(this);
        this.handleEmailChange = this.handleEmailChange.bind(this);
    }

    handleInviteUsers(event) {
        event.preventDefault();

        return axios.post(`http://${process.env.BASE_API}/groups/users/invite`, {
            emails: this.state.emailsToInvite,
            emailOfInviter: this.props.emailOfUser,
            groupName: this.props.groupName
        })
            .then((res) => {
                this.props.closeModal();
            })
            .catch((err)=> {
                this.setState({
                    apiErr: err
                });
            });
    }

    handleSubmit(event) {
        this.setState({
            emailsToInvite: [...this.state.emailsToInvite, this.state.currentEmail]
        });
    }

    handleRemoveInvite(event) {
        const emailToRemove = event.currentTarget.dataset.email;

        event.preventDefault();

        this.state.emailsToInvite.splice(this.state.emailsToInvite.indexOf(emailToRemove), 1);
    }

    handleEmailChange(event) {
        this.setState({
            currentEmail: event.currentTarget.value
        });
    }

    handleModalClose() {
        this.props.closeModal();
    }

    render() {
        return (
            <Modal show={this.props.showModal} onHide={this.handleModalClose} bsSize="large">
                <Modal.Header closeButton>
                    <Modal.Title>Invite</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <form role="form" onSubmit={this.handleSubmit}>
                        <FormGroup controlId="inviteUsersForm">
                            <FormControl type="email" value={this.state.currentEmail} placeholder="Email" onChange={this.handleEmailChange}></FormControl>
                            <Button type="submit" bsStyle="primary">
                                <FontAwesomeIcon icon="plus"/> Invite
                            </Button>
                        </FormGroup>
                    </form>
                    <hr/>
                    <h1>Users to invite</h1>
                    <Table striped bordered condensed hover>
                        <thead>
                            <tr>
                                <th scope="col">Email</th>
                                <th scope="col"></th>
                            </tr>
                        </thead>
                        <tbody>
                            { this.state.emailsToInvite.map(function(email, i) {
                                return <tr key={i}>
                                    <td>{ email }</td>
                                    <td>
                                        <Button bsStyle="danger" onClick={this.handleRemoveInvite} data-email={email}>
                                            <FontAwesomeIcon icon="minus"/>
                                        </Button>
                                    </td>
                                </tr>;
                            }, this)}
                        </tbody>
                    </Table>
                    { this.state.apiErr &&
                        <ErrorAlert err={this.state.apiErr}/>
                    }
                </Modal.Body>

                <Modal.Footer>
                    <Button onClick={this.handleModalClose}>Cancel</Button>
                    <Button onClick={this.handleInviteUsers} bsStype="primary">Save</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

看起来,我正在正确导入组件。调试时, constructor 甚至没有被击中,所以我不确定哪里出了问题。

这在我引入React路由器/Redux之前就已经起作用了,所以它们有可能是问题所在吗?

当我单击按钮 “邀请用户” . 在调试时,我可以到达该行来显示模式,如果超出此范围,就会抛出一个错误。

错误的完整列表为:

编辑

我也尝试过渲染 InviteUsersModal 通过 element variables 取而代之的是 render 方法为:

RelDead(){ const modal=(this.state.groupAction==“删除”)?:

    return (
        <>
            <div id="dialog-region">
                <Table striped bordered condensed hover>
                    ...
                </Table>
                { this.state.showModal &&
                    {Modal}
                }
                ...
            </div>
        </>
    );
}

但也有类似的错误:

1 回复 | 直到 7 年前

1

0

Kabbany 7 年前

我想您应该调整以下行:

const Modal = (this.state.groupAction === "remove") ? <ListUsersModal /> : <InviteUsersModal />;

到:

const Modal = (this.state.groupAction === "remove") ? ListUsersModal : InviteUsersModal;

您正在将组件的实例分配给变量模式,而不是将其呈现为组件