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' ファイルです。 Tabbox.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私はLayout.jsから渡されたオブジェクトの配列です。

私はこのコンポーネントを定義するために矢印関数を使用しました。このエラーの意味はわかりません。誰か助けてくれますか？本当に感謝しています！

props.orders.mapの機能の中にconsole.logを追加して動作します。 props.orderは2つのオブジェクトを持つ配列なので、2回印刷されます。今問題はOrder.jsが表示されないことです。

Answer 1

インポートするコンポーネントの名前Orderと、定義してその後レンダリングメソッドで使用するconst Orderとの間の名前の衝突でもかまいません。後者を何かに変更してみてください