时间戳

首页 > 解决方案 > 尝试从道具迭代对象数组但未定义（反应）

javascript - 尝试从道具迭代对象数组但未定义（反应）

问题描述

从我的家庭组件中，我试图将一个道具传递给一个具有如下产品对象的模态组件：

import {useSelector} from 'react-redux';
import {Link} from 'react-router-dom';
import {useState} from 'react';
import { isAuthenticated } from '../helpers/auth';
import EditProductModal from './EditProductModal';

export default function Home(){


    const [product,setProduct]= useState({})

 
    const {products} = useSelector(state=>state.products) ;

    return(
    <>
        <div className='container mt-5'>
            <div className="row">
                {products.map(product=>(
                 <div key={product._id} className="col">
                    <div  className="card mb-4" style={{width: '18rem'}}>
                         <Link to={{pathname: '/product', state:{product: product}}} ><img className="card-img-top" src={`/uploads/${product.productPhoto}`} style={{height:'15rem'}} alt=""/></Link>
                         <div className="card-body">
                            <h4 className="card-title text-primary">{product.name}</h4>
                            <h5>{product.price}<i className="fas fa-euro-sign"/></h5>
                            {isAuthenticated().role===1 ? 
                            (<><button className='btn btn-outline-primary' data-bs-toggle="modal" data-bs-target="#editProduct" onClick={()=>setProduct(product)}><i class="fas fa-edit"/>        Edit</button>  
                            <button className='btn btn-outline-primary'><i class="fas fa-trash-alt"/>       Delete</button></>)
                            :
                            (<button className="btn btn-primary">Add to cart</button>)
                            }
                            
                        </div>                         
                    </div>
                </div>       
            ))}

          <EditProductModal product={product} />
              
            </div>

        </div>

产品看起来像这样：

{
name: '',
main_category:'',
sub_category:'',
price:'',
description:'',
sizes: [] //array of objects
}

在我的 EditProductModal 组件中，我可以从产品道具中获取所有值，但是当我尝试使用 map 遍历对象（大小）数组时，我得到“大小未定义”。

标签： javascriptreactjs

解决方案

第一次渲染，产品似乎等于{}所以，尺寸将是未定义的。

product我认为只有在设置时才需要显示模式

{product && <EditProductModal product={product} />}

推荐阅读