Javascript React不是渲染组件，也不会给出错误

如前所述，react不会给出错误，也不会渲染组件。这可能是由于嵌套贴图造成的。你会怎么做

我的数组如下： [“HS”：{“shortDetails”：{…}，“longDetails”：{…}，“photos”：[…]}，“HS2”：{“shortDetails”：{…}，“longDetails”：{…}，“photos”：[…]}，]

父组件

const ListingCarousel = (props) => {

    return (
        <Carousel responsive={responsive} containerClass="carousel-container" itemClass="carousel-item-padding-40-px">

            {
            props.listingDetails.map((data, key) => {
              Object.keys(data).map((item, i) => {
                return <ListingCard 
                        key={i} 
                        src={data[item].photos[0].src} 
                        title={data[item].shortDetails.title} 
                        price={`${data[item].shortDetails.price.amount} ${data[item].shortDetails.price.recurringPayment}, ${data[item].shortDetails.price.priceType}`} 
                        address={`${data[item].shortDetails.address.street}, ${data[item].shortDetails.address.mun} ${data[item].shortDetails.address.ward}, ${data[item].shortDetails.address.district}, ${data[item].shortDetails.address.province}`}
                      />
                      
              })
            })
            }
    
        </Carousel>
    )
  }

const ListingCard = (props) => {
console.log(props);
    return (
            <div key={props.key} class="card" style={{width: "380px", height:"300px"}}>
            <img class="card-img-top" src={props.src} class="img-fluid" style={{height:"200px", width:"380px", objectFit:"cover"}} />
            <div class="card-body">
                <h5 class="card-title">{props.title}</h5>
                <h6 class="card-subtitle mb-2">{props.price}</h6>
                <h6 class="card-subtitle mb-2">{props.address}</h6>
            </div>
            </div>
    )
  }

const ListingCarousel=（道具）=>{
返回(
{
props.listingDetails.map（（数据，键）=>{
Object.keys（数据）.map（（项目，i）=>{
返回
})
})
}
)
}

子组件

const ListingCarousel = (props) => {

    return (
        <Carousel responsive={responsive} containerClass="carousel-container" itemClass="carousel-item-padding-40-px">

            {
            props.listingDetails.map((data, key) => {
              Object.keys(data).map((item, i) => {
                return <ListingCard 
                        key={i} 
                        src={data[item].photos[0].src} 
                        title={data[item].shortDetails.title} 
                        price={`${data[item].shortDetails.price.amount} ${data[item].shortDetails.price.recurringPayment}, ${data[item].shortDetails.price.priceType}`} 
                        address={`${data[item].shortDetails.address.street}, ${data[item].shortDetails.address.mun} ${data[item].shortDetails.address.ward}, ${data[item].shortDetails.address.district}, ${data[item].shortDetails.address.province}`}
                      />
                      
              })
            })
            }
    
        </Carousel>
    )
  }

const ListingCard = (props) => {
console.log(props);
    return (
            <div key={props.key} class="card" style={{width: "380px", height:"300px"}}>
            <img class="card-img-top" src={props.src} class="img-fluid" style={{height:"200px", width:"380px", objectFit:"cover"}} />
            <div class="card-body">
                <h5 class="card-title">{props.title}</h5>
                <h6 class="card-subtitle mb-2">{props.price}</h6>
                <h6 class="card-subtitle mb-2">{props.address}</h6>
            </div>
            </div>
    )
  }

const ListingCard=（道具）=>{
控制台日志（道具）；
返回(
{props.title}
{props.price}
{props.address}
)
}

你能添加你的代码吗？使用这个“return Object.keys（data）.map（（item，i）=>{”@FerhatBAŞ它给出了一个错误：预期一个赋值或函数调用，但看到了一个表达式。哦，等等，所以我必须从Objet.keys函数的内部和外部进行操作。这很有效。谢谢@FerhatBAŞ！