javascript - 错误：对象作为反应子无效

问题描述

我正在尝试遍历来自数据库的数据，但反应给了我这个错误

我已经尝试通过在单独的组件中呈现列表仍然无法正常工作！，我是反应生态系统的初学者。获取的数据看起来像 -

我的页面代码是这个-

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

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

标签： javascriptreactjsreact-hooks

您存储new Date()在您的订单状态中，它被视为对象。为了呈现它，您可以将其转换为字符串

{order.date.toString()}

或者

{order.date.toDateString()}

javascript - 错误：对象作为反应子无效

问题描述

解决方案

推荐阅读