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

Question

Я получаю эту ошибку в браузере.

expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Tabbox_order .

Вот мой файл '' Tabbox_orber.js

import React from "react"; 

import Walker from './Walker'; 
import Order from './Order'; 

require('../css/Tabbox-order.scss'); 

const Tabbox_order = (props) => { 
    const Order = props.orders.map((order, index) => { 
    return <Order order={order} key={index} /> 
    }); 

    return(
    <div id='tabbox-order'> 
     <div id='tabbox-bar'> 
     <p>Username</p> 
     <p>Service Details</p> 
     <span>Address</span> 
     </div> 
     <div id='Cutting' ></div> 
     {Order} 
    </div> 
) 

} 


export default Tabbox_order 

И вот мой файл 'Order.js.

import React from "react"; 

require('../css/Order.scss'); 

const Order = ({order}) => { 

    return(

    <div id='order-info'> 
     <div className='infor'> 
     <img src='../../img/logo.png'></img> 

     <div>{order.pet.name}</div> 

     <div>8 mins ago</div> 
     </div> 
     <div className='infor'> 
     <img src='../../img/logo.png'></img> 

     <div>Zichen Wang</div> 

     <div>8 mins ago</div> 
     </div> 
     <div className='infor'> 
     <img src='../../img/logo.png'></img> 

     <div>Zichen Wang</div> 
     <div>8 mins ago</div> 
     </div> 

    </div> 


) 
} 

export default Order 

props.orders в Tabbox.js представляет собой массив объектов я переходил из Layout.js.

Поэтому я использовал функцию стрелки для определения этого компонента, я не знаю, что означает эта ошибка. Может кто-нибудь мне помочь? Действительно оценил это!

Я добавил console.log внутри функции props.orders.map и он работает. Он печатает дважды из-за props.order - массив имеет два объекта. Теперь проблема Order.js не отображается.

Answer 1

Может возникнуть столкновение имен между именем компонента Order, которое вы импортируете, и const Order, которые вы определяете и затем используете в методе визуализации. Попробуйте изменить последнее на что-то еще