React.createElement：類型無效（redux / react-router？）

Question

我知道這個問題已經問了很多遍了：

• React.createElement：類型無效-應該是一個字符串
• 元素類型無效：預期為字符串（對於內置組件）或類/函數
• 警告：React.createElement：類型無效-預期為字符串（對於內置組件）

...但是這些都沒有幫助我。 從這些問題/答案中，我得出的普遍共識是，這通常發生在import / export問題中（通過我的代碼庫查看，這不是我遇到的問題） 。

我有3個組件： CognitoLogin ， ListGroups和InviteUserModal 。 CogntioLogin是一項身份驗證服務，並使用react-router-dom <Redirect>重定向到ListGroups 。 然后，單擊按鈕即可呈現InviteUserModal 。 這是我的代碼（重要的一點） ：

CognitoLogin.js

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

ListGroups.js

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

InviteUsersModal.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-router / redux之前這確實起作用了，所以可能是問題所在嗎？

當我單擊“邀請用戶”按鈕時，就會發生錯誤。 進行調試時，我可以顯示該模式，並且超出此范圍將引發錯誤。

錯誤的完整列表是：

編輯

我還嘗試過通過元素變量呈現InviteUsersModal ，因此render方法將是：

render（）{const Modal =（this.state.groupAction ===“刪除”）？ ：;

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

但得到類似的錯誤：

Answer 1

我認為您應該調整以下行：

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

至：

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

您正在將組件實例分配給變量Modal，而不是渲染它，而是將其用作組件