错误 : Object are not valid as a react child

Question

我正试图循环处理来自数据库的数据，但react却给了我这样的错误信息

我试过在单独的组件中渲染列表，但还是不行！，我是反应生态系统的初学者，获取的数据看起来像--。

我的页面代码是这样的

import React,  useEffect, useState  from 'react';
import './account.scss';
import  connect  from 'react-redux';
import  createStructuredSelector  from 'reselect';
import  selectCurrentUser  from '../../reducer/user/user.selectors';
import Order from '../../models/order';


const AccountPage = ( currentUser ) =>
const[orders,setOrders]=useState([]);

useEffect(()=>
    const fetchFunc= async () =>
        try
            const response= await  fetch(`https://orders-6exxx.firebaseio.com/userorders/$currentUser.id.json`);

            if(!response.ok)
                throw new Error('Something Went Wrong!');
            
            const resData= await response.json();
            const loadedOrders=[];

            for(const key in resData)
                loadedOrders.push(
                    new Order(
                  key,
                  resData[key].cartItems,
                  resData[key].totalAmount,
                  new Date(resData[key].date)
                ));
            
       setOrders(loadedOrders);
        catch(err)
     throw err;
        
    ;

    fetchFunc();


,[currentUser]);

console.log(orders);

    return(
        <div className='account'>
        orders&&orders.length ? (
            <div className='account__container'>



              
                 orders.map(order =>(
                     <div className='account__containers__orders'>
                         <div className='account__containers__orders--date'>
                               order.date
                             </div>

                             
                                 order.items.map(item => (
                                     <div className='account__containers__orders__item'>
                                          <div>item.name</div>
                                          <div>item.quantity x</div>
                                          <div>item.price</div>
                                     </div>
                                 ))
                             

                          <div className='account__containers__orders--total'>
                              <span className='price--tag'>&#8377;</span> order.totalAmount
                             </div>

                </div>
                 ))
                   

    </div>
        ) : (
            <div className='orders-loading'>
                No Orders
            </div>
        )

   </div>
    );
;



const mapStateToProps = createStructuredSelector(
    currentUser: selectCurrentUser
  );



  export default connect(
   mapStateToProps
  )(AccountPage);

单个数据正在加载，但当我试图打印多个数据时，它给我这个错误。