Ошибка компонентов React и App.js: недопустимый тип элемента

1

Я только начал изучать компоненты React, и у меня возникли проблемы с компонентом и файлами App.js.

Я получаю следующие ошибки:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Мой код выглядит следующим образом:

Компонент продуктов:

import React from 'react';
import Card from "react-bootstrap/Card";
import Container from "react-bootstrap/Container";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";

function Products(props) {
    const listProducts = props.products.map((product, index) =>
    <Col key={index}>
    <Card className="productCard">
    <Card.Body>
    <Card.Title>{product.product_name}</Card.Title>
    <Card.Image src={product.product_image} alt="Services"/>
    <Card.Text>{product.product_description}</Card.Text>
    </Card.Body>
    </Card>
    </Col>
    );
    return (
    <Container>
    <Row>
    {listProducts}
    </Row>
    </Container>
    );
    }

export default Products;

console.log(Products);

App.js:

// Imported react libraries.
import React, {Component} from 'react';
import './App.css';
// Imported images.
// import gym from './images/gym.jpg';
// import spinning from './images/spinning.jpg';
// import personal from './images/personal.jpg';
// Imported components.
import Header from './components/Header.js';
import Landing from './components/Landing.js';
import Products from './components/Products.js';

const loggedIn = true;
const products = 
[{id: "1", 
product_name: "Classic Membership Plan", 
product_image: "./images/gym.jpg", 
product_description: "We have all of the equipment that is needed to enable anyone to achieve their ultimate goal. Gain access to our facilities and start your transformation."}, 
{id: "2", 
product_name: "Elite Membership Plan", 
product_image: "./images/spinning.jpg", 
product_description: "This membership plan gains you access to all of the equipment, as well as give you the option of joining up to two of our classes. Whether you into spinning classes, yoga, boxing or showing off your moves in a Zumba Fitness class."},
{id: "3", 
product_name: "Pro Membership Plan", 
product_image: "./images/personal.jpg", 
product_description: "This membership plan grants you full access to all of our facilities and classes. In addition you also get assiged a personal trainer that will help you with your work-out plans, as well as meal plans."}];

console.log (typeof products);

class App extends Component {
  render() {
    return (
      <div className="App">
      <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
      crossOrigin="anonymous"
      />
      <Header name="Chanelle" loggedIn={loggedIn}/>
      <Landing/>
      <Products products={products}/>
      </div>
    );
  }
}

//to render this App component.
export default App;

См. Ниже информацию, которую я получаю с консоли, и фреймы стека:

log.js:24 [HMR] Waiting for update signal from WDS...
Products.js:30 ƒ Products(props) {
  const listProducts = props.products.map((product, index) => /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_5__["jsxDEV"])(react_bootstrap_Col__WEBPACK_IMPORTED…
App.js:28 object

1. index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at Products.js:13.
    at Products (http://localhost:3000/static/js/main.chunk.js:621:30)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:192:1)
console.<computed> @ index.js:1

2. react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Products`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058)
    at createFiberFromElement (react-dom.development.js:25086)
    at createChild (react-dom.development.js:13446)
    at reconcileChildrenArray (react-dom.development.js:13719)
    at reconcileChildFibers (react-dom.development.js:14125)
    at reconcileChildren (react-dom.development.js:16990)
    at updateHostComponent (react-dom.development.js:17632)
    at beginWork (react-dom.development.js:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at scheduleUpdateOnFiber (react-dom.development.js:21881)
    at updateContainer (react-dom.development.js:25482)
    at react-dom.development.js:26021
    at unbatchedUpdates (react-dom.development.js:22431)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:7)
    at Module../src/index.js (index.js:18)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.js:14)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

3. index.js:1 The above error occurred in the <div> component:
at div
    at CardBody (http://localhost:3000/static/js/vendors~main.chunk.js:2451:27)
    at div
    at Card (http://localhost:3000/static/js/vendors~main.chunk.js:2065:23)
    at div
    at Col (http://localhost:3000/static/js/vendors~main.chunk.js:2195:23)
    at div
    at Row (http://localhost:3000/static/js/vendors~main.chunk.js:2312:23)
    at div
    at Container (http://localhost:3000/static/js/vendors~main.chunk.js:2265:23)
    at Products (http://localhost:3000/static/js/main.chunk.js:621:30)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:192:1)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1

4. react-dom.development.js:23275 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Products`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058)
    at createFiberFromElement (react-dom.development.js:25086)
    at createChild (react-dom.development.js:13446)
    at reconcileChildrenArray (react-dom.development.js:13719)
    at reconcileChildFibers (react-dom.development.js:14125)
    at reconcileChildren (react-dom.development.js:16990)
    at updateHostComponent (react-dom.development.js:17632)
    at beginWork (react-dom.development.js:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at scheduleUpdateOnFiber (react-dom.development.js:21881)
    at updateContainer (react-dom.development.js:25482)
    at react-dom.development.js:26021
    at unbatchedUpdates (react-dom.development.js:22431)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:7)
    at Module../src/index.js (index.js:18)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.js:14)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Stackframes:
createFiberFromTypeAndProps
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:25058
createFiberFromElement
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:25086
createChild
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:13446
reconcileChildrenArray
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:13719
reconcileChildFibers
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:14125
reconcileChildren
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:16990
updateHostComponent
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:17632
beginWork
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:19080
HTMLUnknownElement.callCallback
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:3945
invokeGuardedCallbackDev
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:3994
invokeGuardedCallback
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:4056
beginWork$1
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:23964
performUnitOfWork
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:22776
workLoopSync
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:22707
renderRootSync
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:22670
performSyncWorkOnRoot
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:22293
scheduleUpdateOnFiber
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:21881
updateContainer
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:25482
(anonymous function)
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:26021
unbatchedUpdates
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:22431
legacyRenderSubtreeIntoContainer
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:26020
render
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:26103
Module.<anonymous>
C:/Users/chane/Desktop/TASK 9.1/my-company/src/index.js:7
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:983:30
__webpack_require__
C:/Users/chane/Desktop/TASK 9.1/my-company/webpack/bootstrap:856
fn
C:/Users/chane/Desktop/TASK 9.1/my-company/webpack/bootstrap:150
1
http://localhost:3000/static/js/main.chunk.js:1106:18
__webpack_require__
C:/Users/chane/Desktop/TASK 9.1/my-company/webpack/bootstrap:856
checkDeferredModules
C:/Users/chane/Desktop/TASK 9.1/my-company/webpack/bootstrap:45
Array.webpackJsonpCallback [as push]
C:/Users/chane/Desktop/TASK 9.1/my-company/webpack/bootstrap:32
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:73

Сначала я подумал, что это как-то связано с изображениями, которые были включены в импорт и вызываются в массиве, поэтому я изменил это, но все еще получаю эту ошибку.

Мой импорт и экспорт в порядке. Может, я все же смешиваю языки? Я не совсем уверен, в чем я ошибаюсь.

Я исследовал эту ошибку, посетив довольно много веб-сайтов в Google, но не могу найти решение для этого.

Буду признателен за любую помощь, которую кто-нибудь готов предложить.

Теги:
CodeFix

1 ответ

3
Лучший ответ

Глядя на ошибку с меткой 3, это говорит о том, что это не вашаProduct это не определено, но это что-то внутри вашегоCard.Body это не определено.

Я не вижуCard.Image вreact-bootstrap документы, но я вижу Card.Img . Попробуйте использовать это.

Поделиться
Источник
  • 0
    Ты прав !
  • 0
    Это прекрасно работает. Большое спасибо вам обоим за вашу помощь. Я изо всех сил пытаюсь показать свои изображения. В настоящее время у меня есть Card.Img src = {product.product_image} alt = "Services" /> в файле компонента продукта. Я попытался импортировать его (импортировать тренажерный зал из './images/gym.jpg'; и вызвать его в массиве (product_image: {gym},). Я также попытался использовать только источник в самом массиве (product_image: " ./images/gym.jpg ",). Я где-то читал, что с Webpacks может пригодиться require (), но это тоже не сработало. У вас, случайно, есть какие-то возможные решения, которыми вы готовы поделиться?
  • 0
    Документы, похоже, подразумевают, что вы можете использовать Img только вне Body с variant который помещает его вверху или внизу. Если вы хотите, чтобы ваше изображение находилось в середине тела, как сейчас, вам, возможно, придется вернуться к элементу <img>
  • 0
    @samuei Мои искренние извинения. К сожалению, я пропустил, что кто-то прокомментировал мой пост. Спасибо за помощь. Я решил это, добавив изображения в "общедоступную" папку.

Другие вопросы

  • Добавление верхнего и нижнего колонтитула для всех экранов в JSPDF1 ответ

    Я пытаюсь добавить верхний и нижний колонтитулы на всех экранах при загрузке PDF. Я добавил таблицу с фиктивными данными, используя jspdf-autotable, и могу ее скачать. Но заголовок идет только на последней странице загруженного PDf. Мне нужна помощь, чтобы получить верхний и нижний колонтитулы с ном...

  • Ионный - реагировать как на повторение компонента1 ответ

    Я хочу повторить свой компонент n раз, используя реакцию в ионном режиме, но я не знаю, как это сделать например в моемComponent.tsx у меня есть:import React from 'react'; import { IonCard, IonCardContent} from '@ionic/react'; const Component: React.FC = () => { return( <div> ...

  • Запустить внешний файл Javascript снова после реакции на изменение условия?1 ответ

    Пожалуйста, прочтите весь вопрос, прежде чем отвечать. Итак, у меня есть ванильный файл javascript, который я использую, чтобы попытаться активировать запрос на выборку всякий раз, когда нажимается кнопка в отдельном файле реакции. Этот ванильный файл javascript НЕ находится в папке src, в которой н...

  • React js не найден / пустая страница на странице обновления1 ответ

    Я знаю, что это распространенный вопрос, и я попробовал некоторые ответы в stackoverflow, но в моем случае это еще не сработало. У меня есть приложение на виртуальном хостинге, которое я создал с помощьюyarn build . Когда я обновляю страницу404 ошибка отображается должным образом. Итак, я прочитал э...

  • Разбор JSON в массив объектов для перехвата состояния React2 ответ

    У меня есть компонент перехвата реакции, который запрашивает API и получает ответ json. Вот результатimport React, {useEffect, useState} from 'react'; import axios from 'axios'; const fetch = () => axios({ "method": "GET", "url": "https://rest.coinap...

  • Реагировать на асинхронный рендеринг нескольких компонентов с состояниями1 ответ

    Я пытаюсь использовать GPU.js в образце проекта CRA React. Я пытаюсь провести видимое сравнение вычислений CPU и GPU, но React «ждет» завершения вычислений CPU, прежде чем показать все результаты, несмотря на то, что они находятся в отдельных компонентах, используя отдельные состояния. Пример: в том...

  • Невозможно использовать onPress для навигации внутри вложенного Screen React Native1 ответ

    Позвольте мне начать с того, что я новичок в React Native. У меня есть компонент AppNavigation.js, который содержит вложенные функции для замены представлений с вкладками с помощью createBottomTabNavigator () . Проблема, с которой я столкнулся, заключается в том, что я не могу использовать кнопку, с...

  • Как динамически добавлять метатеги для SEO и социальных сетей в приложении React JS1 ответ

    В настоящее время я работаю над новостным сайтом, используя response js (backend express js rest api). Этому сайту нужна функция публикации в социальных сетях с изображением и заголовком сообщения. Добавляю метатеги с помощью шлема. Я тоже пробовал пакеты с предварительным рендерингом, даже несмотря...

  • Все значения верны, хотя значения были изменены.1 ответ

    У меня есть три поля ввода. Один раз для электронной почты, пароля и подтверждения пароля. Если пользователь нажимает кнопку, тогда методcheckAll() должен быть выполнен, это проверяет, верны ли значения по умолчанию для полей, если нет другого класса, должен быть назначен полям, и переменная должна ...

  • Webpack с Babel выдает неперехваченную ссылку Ошибка: требование не определено1 ответ

    Я настроил Webpack со следующими настройками:module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: ["babel-loader"] } ] }, mode: 'development' }; А такжеbabel...

CodeFix
Цитата дня

"Завидую тестировщикам: все хотят с ними дружить."

Эндрю Таненбаум