React.createElement: тип недействителен (резервный / реагирующий маршрутизатор?) - PullRequest
Новая
       12

React.createElement: тип недействителен (резервный / реагирующий маршрутизатор?)

0 голосов
/ 19 декабря 2018

Я понимаю, что этот вопрос задавался несколько раз:

... но ничего из этого мне не помогло.Из этих вопросов / ответов я понимаю, что общее согласие заключается в том, что это обычно происходит с проблемой import / export, которая (просматривая мою кодовую базу, не является проблемой, с которой я сталкиваюсь) .

У меня есть 3 компонента: CognitoLogin , ListGroups и InviteUserModal , CogntioLogin - это служба авторизации, которая перенаправляет на ListGroups с использованием response-router-dom <Redirect>.Это тогда делает 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 даже не срабатывает, так что я не уверен, где он идет не так.

Это сработало до того, как я ввел response-router / redux, так возможно ли, что это проблема?

Ошибка (и) происходят, когда я нажимаю кнопку «Пригласить пользователей» .При отладке я могу добраться до строки, чтобы показать модальный режим, и еще что-нибудь выдаст ошибку.

Полный список ошибок:

errors

РЕДАКТИРОВАТЬ

Я также попытался отобразить InviteUsersModal через переменные элемента , поэтому метод render будет:

render () {const Modal = (this.state.groupAction === "удалить")?:; 

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

, но появляются похожие ошибки:

enter image description here

1 Ответ

0 голосов
/ 19 декабря 2018

Я думаю, вам следует настроить следующую строку:

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

Кому:

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

Вы назначаете экземпляркомпонент в переменную Modal и вместо его рендеринга вы используете его в качестве компонента

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...