时间戳

首页 > 解决方案 > Redux 失败的道具类型：无法将类作为函数调用

reactjs - Redux 失败的道具类型：无法将类作为函数调用

问题描述

我设计了一个 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 对象。

标签： reactjsreduxreact-redux

解决方案

我认为问题出在PropTypes.arrayOf(Alert).isRequired. PropTypes.arrayOf期望验证器函数而不是类类型。请参阅此处的文档。

推荐阅读