警告：函数作为 React 子级无效答案

【问题标题】：Warning: Functions are not valid as a React child警告：函数作为 React 子级无效
【发布时间】：2018-11-05 07:32:24
【问题描述】：

我不知道为什么会出现以下错误...任何帮助将不胜感激！

"warning.js:35 警告：函数作为 React 子级无效。如果您返回 Component 而不是从渲染中返回，则可能会发生这种情况。或者您可能打算调用此函数而不是返回它。"

这是我的代码：

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

【问题讨论】：

这个问题可能来自您导入的组件之一。请确保您的组件是按照反应文档中指定的方式创建的。
为什么要在这里将组件导出为函数？

标签： javascript reactjs redux jsx

【解决方案1】：

好吧，正如警告所说 - 您不能导出函数然后将其用作组件（我猜您在某个地方会这样做）。改为导出组件（将箭头函数放在开头）

【讨论】：