Question

我设计了一个redux API来显示通知。它可以工作，但是第一次执行时会收到警告。这个：

Failed prop type: Cannot call a class as a function
    in AlertsContainer (created by Connect(AlertsContainer))
    in Connect(AlertsContainer) (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Root)
    in Provider (created by Root)
    in Root

/ *****容器*** /

import React from 'react';
import {connect} from 'react-redux';
import PropTypes from "prop-types";
import {closeNotification} from './alertActions'
import Alerts from './Alerts';
import Alert from './alert';
import alertConfiguration from './alertConfiguration';


class AlertsContainer extends React.Component {
    static propTypes = {
        alerts:PropTypes.arrayOf(Alert).isRequired,
        closeNotification:PropTypes.func.isRequired
    };
    handleClose = (alert) => {
        this.props.closeNotification(alert);
    };
    render() {
        const {alerts} = this.props;
        return <Alerts alertConfig={alertConfiguration}
                       alerts={alerts}
                       onAlertDismissed={this.handleClose} />;
    }
}
const mapStateToProps = (state, ownProps) => {
    return {alerts:state.alerts};
};
export default connect(mapStateToProps,{closeNotification})(AlertsContainer);

/ ****组件***** /

import React from 'react';
import {AlertList} from "react-bs-notifier";
import PropTypes from "prop-types";
import Alert from './alert';
const Alerts =({onAlertDismissed, alerts, alertConfig}) => {
    return <AlertList timeout={alertConfig.timeout}
               position={alertConfig.position}
               alerts={alerts}
               dismissTitle="Begone!"
               onDismiss={onAlertDismissed}/>;
};
Alerts.propTypes = {
    onAlertDismissed: PropTypes.func.isRequired,
    alerts: PropTypes.array.isRequired,
    alertConfig: PropTypes.object.isRequired
};
export default Alerts;

我不知道错误在哪里，这是我从来没有得到过的错误。

谢谢。

/ *编辑* /

动作

import {
    DISMISS_NOTIFICATION,
    SHOW_NOTIFICATION
} from "./alertConstants";

export const showNotification = (notificationType,notificationProps) =>  (dispatch, getState) => {
    const newAlert ={
        id: notificationProps.id,
        type:notificationProps.type,
        headline:notificationProps.headline,
        message: notificationProps.message
    };

    return dispatch({type : SHOW_NOTIFICATION, notificationType:notificationType,notificationProps:newAlert});
};
export const closeNotification = (notification) =>  (dispatch, getState) => {
    return dispatch({type : DISMISS_NOTIFICATION, currentNotification : notification});
};

我已按照要求添加了操作。

/ *编辑* /

/ ****警报对象**** /

export default class Alert {
constructor(message) {
    this._id = new Date().getTime();
    this.type = "danger";
    this._headline="";
    this.message = message;
}

get headline() {
    return this._headline;
}

set headline(value) {
    this._headline = value;
}

get id() {
    return this._id;
}

get type() {
    return this._type;
}

set type(value) {
    this._type = value;
}

get message() {
    return this._message;
}

set message(value) {
    this._message = value;
}
}

我已按要求添加了Alert对象。

Answer 1

我认为问题出在PropTypes.arrayOf(Alert).isRequired中。 PropTypes.arrayOf需要验证函数而不是类类型。请参阅文档here。

Redux失败的prop类型：无法将类作为函数调用

1 个答案: