Блог

Главная - Вопросы по программированию - Реакция — ошибка: недопустимый тип элемента: ожидаемая строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: не определено

Реакция — ошибка: недопустимый тип элемента: ожидаемая строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: не определено

#javascript #reactjs #import #export

#javascript #reactjs #импорт #экспорт

Вопрос:

Уже второй день я не могу понять, в чем моя ошибка, прежде чем я покажу код, пожалуйста, посмотрите на полную ошибку

введите описание изображения здесь

Я изучил различные форумы, включая stackoverflow, но ни один совет не смог устранить мою ошибку

У меня есть три файла TasksHoc, Введение и маршруты. Я импортирую компонент из TasksHoc во введение, а затем в маршруты

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 />
       },
    ]
}

Я пробовал разные варианты экспорта импорта по умолчанию без фигурных скобок и так далее, разве я что-то пропустил? Что касается путей импорта и экспорта компонентов, я использую WebStorm IDE, он автоматически определяет пути

Ответ №1:

вы пробовали использовать компонент класса вместо компонента функции?

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

Комментарии:

1. вы находитесь в строгом режиме? каков ваш index.js . вы используете create-react-app?

2. Этот параметр не помог преобразовать функцию в класс

3. Я обнаружил проблему, проблему внутри jsx, когда я удаляю все jsx и оставляю только этот код ` { task.map((i, index) => { return( <FormControlLabel value={i.value} control={<Radio/>} label={i.question}/> ); } ) }` Все работает нормально, но я все еще не могу понять, почему

4. вы имеете в виду ваши удаленные <> </> (фрагменты реакции)?

Ответ №2:

Я изменил функциональный компонент RadioButtonGroup на компонент класса, и у меня все заработало

Ответ №3:

Существует еще один случай, когда может возникнуть эта ошибка, и это когда ваш экспорт выполнен неправильно. Если весь код JSX, который должен быть возвращен вашим функциональным компонентом или методом визуализации вашего компонента, хранится в переменной javascript, и эта переменная возвращается напрямую, React обрабатывает строку как обычный Javascript, в отличие от JSX. Это означает, что вы не должны заключать переменную в фигурные скобки.

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

Приведенный выше код выдаст ошибку того же типа, что и в заданном вопросе, потому что {bannerCode} обрабатывается как объект. Чтобы исправить это, просто удалите фигурные скобки, вот так.

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

Хотя это не является причиной ошибки во фрагменте кода вопроса, я помещаю это здесь для справочных целей.