React - 错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义

Question

第二天我已经无法理解我的错误是什么，在我显示代码之前，请查看完整的错误

我研究了各种论坛，包括stackoverflow，但没有任何建议能够解决我的错误

我有三个文件TasksHoc, Introduction 和 Routes 。 我正在将一个组件从 TasksHoc 导入到 Introduction 然后到 Routes

TasksHoc.js

const useStyles = makeStyles((theme) => ({
    ...code
}));

export function RadioButtonsHoc(...code) {
    return function RadioButtonsGroup() {
        ...code

        return (
            ...code
        );
    }

}

介绍.js

import {RadioButtonsHoc} from "../Tasks/TasksHoc";

function Introduction(props) {

const {value} = props;
const [task, setTask] = useState([
    {value: 'best', question: 'Question 1'},
    {value: 'worst', question: 'Question 2'},
]);

return (
    <>
        {
            task.map((i, index) => {
                    return(
                        <FormControlLabel value={i.value} control={<Radio/>} label={i.question}/>
                    );
                }
            )
        }
    </>
);
}

export const Introductions = RadioButtonsHoc(Introduction, 'value');

路由.js

import {Introductions} from "../LessonComponents/Introduction";

function RoutesPage(props) {
    const routes = [
       {
          path: `${path}/Introduction`,
          component: () => <Introductions />
       },
    ]
}

我尝试了不同的选项导出默认导入没有大括号等等我不能错过什么吗？ 至于组件的导入导出路径，我用的是WebStorm IDE，它会自动检测路径

Answer 1

您是否尝试过使用 class 组件而不是 function 组件？

class Introduction extends React.Component{
    const {value} = props;
    const [task, setTask] = useState([
        {value: 'best', question: 'Question 1'},
        {value: 'worst', question: 'Question 2'},
    ]);
    render(){
    return (
        <>
            {
                task.map((i, index) => {
                        return(
                            <FormControlLabel value={i.value} control={<Radio/>} label={i.question}/>
                        );
                    }
                )
            }
        </>
    );
    }
}

Answer 2

我将功能组件RadioButtonGroup更改为 class 组件，一切都对我有用

Answer 3

在另一种情况下可能会出现此错误，即您的导出操作不正确。 如果您的功能组件或组件的渲染方法要返回的所有 JSX 代码都存储在 javascript 变量中，并且该变量被直接返回，那么 React 将该行视为普通 Javascript，而不是 JSX . 这意味着您不应该用花括号将变量包裹起来。

    if (props.show) {
        bannerCode = (
            <div className={classes.container}>
                <h2>{props.text}</h2>
            </div>
        );
    }
    return {bannerCode};

上面的代码将抛出与问题中相同类型的错误，因为 {bannerCode} 被视为 object。 为了解决这个问题，只需像这样去掉花括号。

    if (props.show) {
        bannerCode = (
            <div className={classes.container}>
                <h2>{props.text}</h2>
            </div>
        );
    }
    return bannerCode;

虽然这不是问题代码片段出错的原因，但我将其放在这里以供参考。