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

Question

For the second day already I cannot understand what my mistake is, before I show the code, please look at the complete error

I have studied various forums, including stackoverflow, but no advice has been able to resolve my error

I have three files TasksHoc, Introduction and Routes . I am importing a component from TasksHoc to Introduction and then to Routes

TasksHoc.js

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

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

        return (
            ...code
        );
    }

}

Introduction.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');

Routes.js

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

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

I tried different options export default import without curly braces and so on can't I missed something? As for the paths of imports and exports of components, I use the WebStorm IDE, it automatically detects the paths

Answer 1

have you tried using class component instead of function component?

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

I changed the functional component RadioButtonGroup to a class component and everything worked for me

Answer 3

There is another case where this error might arise, and that is when your export is done incorrectly. If all of the JSX code that is to be returned by your functional component or by the render method of your component is stored in a javascript variable, and that variable is being returned directly, React treats the line as normal Javascript, as opposed to JSX. This means that you shouldn't wrap the variable with curly braces.

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

The above code will throw the same type of error as the one in the question asked, because {bannerCode} is treated as an object. In order to fix this, simply strip away the curly braces, like so.

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

While this isn't the cause for error in the question's code snippet, I'm putting this here for reference purposes.