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;

雖然這不是問題代碼片段出錯的原因，但我將其放在這里以供參考。