Javascript 尝试从道具迭代对象数组，但未定义（React）

在我的主组件中，我尝试将道具传递给具有以下产品对象的模态组件：

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组件中，我可以从product prop获取所有值，但当我尝试使用map遍历对象数组（大小）时，我得到“大小未定义”。

第一次渲染时，product似乎等于

{}

，因此，大小将未定义

我认为只有设置了

产品

时，您才需要显示模式

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

{product&&}

这可能是因为变量命名错误吗？您正在将处于状态的

product

设置为

{}

，然后在

产品的映射中使用相同的变量名
product
。即使这不是原因，您也没有使自己或其他人易于调试

您还应该检查是否确实从Redux获得了预期的数据。基于这一行
const{products}=useSelector（state=>state.products）
存储的形状应该类似于这样，因为您正在分解从选择器返回的对象：

{
产品：{
产品：[
{...},
{...},
]
}
}
找到了它

所以@HichamELBSI实际上在某种程度上帮助了我。不是在我的主页组件中，而是在我的EditProductModal中，我必须放置：

{product.sizes && product.sizes.map ....}

我成功地迭代了我想要的数组。
我尝试了这个，但没有结果。在EditProductModal中，我分解产品属性-当我
console.log（product.size）
时，我得到了数组-当我
console.log（product.size[0]）
时，我得到了未定义的product.size。我尝试了
console.log（typeof product.size）
，得到了'object'，我也尝试了
console.log（Array.isArray（product.size）
，我得到了正确的答案您的命名可能是对的，但这不是问题所在。