警告:函数作为React子函数无效

时间:2018-05-25 21:23:25

标签: javascript reactjs redux jsx

我无法弄清楚为什么我会收到以下错误...我们非常感谢任何帮助!

" warning.js:35警告:函数作为React子函数无效。如果返回Component而不是render,则可能会发生这种情况。或许你打算调用这个函数而不是返回它。"

这是我的代码:

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import ContentTable from './ContentTableBuilder';

import {
    setCurrentContentPage,
    setCurrentContent,
    clearContentsAfterPage,
    fetchLicensedContents
} from '../../../../actions/library';

export default () => {

    class SchoolContentList extends React.Component {

        render() {
            const {
                activeInstitution,
                contentType,
                role,
                contentPages,
                fetchLicensedContents,
                setCurrentContentPage,
                setCurrentContent,
                clearContentsAfterPage,
            } = this.props;
            return (
                <div className="contentBox">
                    {/* Main Content Table */}
                    <ContentTable {...{
                        recordPages: contentPages,
                        fetchRecords: (...args) => fetchLicensedContents(contentType, role, activeInstitution.id, ...args),
                        setCurrentRecordPage: setCurrentContentPage,
                        setCurrentRecord: setCurrentContent,
                        clearRecordsAfterPage: clearContentsAfterPage,
                    }} />
                </div>
            );
        }
    }

SchoolContentList.propTypes = {
    role: PropTypes.string.isRequired,
    activeInstitution: PropTypes.shape({
        id: PropTypes.number,
    }).isRequired,
    contentPages: PropTypes.object.isRequired,
    fetchLicensedContents: PropTypes.func.isRequired,
    setCurrentContentPage: PropTypes.func.isRequired,
    setCurrentContent: PropTypes.func.isRequired,
    clearContentsAfterPage: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => {
    const auth = state.auth;
    return {
        role: auth.user.role,
        activeInstitution: auth.institutions.active || {},
        contentPages: state.library.contentPages,
    };
};

const mapDispatchToProps = (dispatch) => ({
    fetchLicensedContents: (contentType, q, page, perPage, sortOpts, extraFilters) => (
        dispatch(fetchLicensedContents(contentType, q, page, perPage, sortOpts, extraFilters))
    ),
    setCurrentContentPage: (page) => dispatch(setCurrentContentPage(page)),
    setCurrentContent: (contentId, data) => dispatch(setCurrentContent(contentId, data)),
    clearContentsAfterPage: (page) => dispatch(clearContentsAfterPage(page)),
});

return connect(
    mapStateToProps,
    mapDispatchToProps
)(SchoolContentList);
};

1 个答案:

答案 0 :(得分:0)

好吧,正如警告所说 - 你无法导出一个函数然后将它用作一个组件(我猜你在某个地方)。改为导出组件(在开头放下箭头功能)