Javascript 无法访问对象内部的属性

在我的react应用程序中，我正在映射一个如下所示的数组

{(newdata !== null) ? newdata && newdata.map((item,key) => {
       console.log("item ",item);
         return (
            <div>{item.image_location}</div>
         )
    }
 ):null
}

我仍然得到一个未定义的错误

最新代码

{(newdata !== null) ? newdata && newdata.map((item, key) => {
                        var newkey = parseInt(key) + 1;
                        console.log("item ", item['place_' + newkey]);
                        return (

                            <Row noGutters className="container_one polaroid unchange_div" key={key}>

                                <Col xs={4} className="attraction_container">
                                    <img src={item.image_location} alt="img"
                                         className="attraction_img"/>
                                </Col>

                            </Row>
                        )
                    }) : (countrydata === null && loading === false) ?
                        <div className="horiz_center"><span className="nodata_lbl">No data</span>
                        </div> : null
                    }

{（newdata！==null）？newdata&&newdata.map（（项，键）=>{
var newkey=parseInt（key）+1；
console.log（“item”，item['place_'+newkey]）；
返回(
)
})：（countrydata==null&&loading==false）？
没有数据
：null
}

在日志中，您可以清楚地看到，

image\u location

属性被包装在

place\u 1

属性中。因此，您必须像

item.place\u 1.image\u location那样访问它

更新

{(newdata !== null) ? newdata && Object.keys(newdata).sort((a,b) => parseInt(a.split('_')[1]) - parseInt(b.split('_')[1])).forEach((key) => {
    console.log("item ", newdata[key]);
    return (
      <Row noGutters className="container_one polaroid unchange_div" key={key}>
        <Col xs={4} className="attraction_container">
          <img src={newdata[key].image_location} alt="img" className="attraction_img"/>
        </Col>
      </Row>
    )
  }) : (countrydata === null && loading === false) ? 
      <div className="horiz_center"><span className="nodata_lbl">No data</span>
    </div> : null
}

{（newdata！==null）？newdata&&Object.keys（newdata）.sort（（a，b）=>parseInt（a.split（'u'）[1]）-parseInt（b.split（'u'）[1]）。forEach（（key）=>{
console.log（“项”，newdata[key]）；
返回(
)
})：（countrydata==null&&loading==false）？
没有数据
：null
}
我尝试了const newkey=parseInt（key）+1；log（“item”，item.$['place_u'+newkey]）；我仍然得到了一个未定义的错误，但奇怪的是，我只得到了第一个对象的结果。其他人正在变得不明确。我检查了我的新钥匙是否正确循环。确实如此。无法找出键按字母顺序迭代的原因，因此当正确的值为place_10时，您尝试访问place_2。你能重新构造你的数据模型，使它只是一个对象数组，而没有中间的位置？@CraZyDroiD你能编辑你的问题吗？在底部添加你的最新代码以便更好地理解？请检查我的答案@CraZyDroiD中的更新
{(newdata !== null) ? newdata && Object.keys(newdata).sort((a,b) => parseInt(a.split('_')[1]) - parseInt(b.split('_')[1])).forEach((key) => {
    console.log("item ", newdata[key]);
    return (
      <Row noGutters className="container_one polaroid unchange_div" key={key}>
        <Col xs={4} className="attraction_container">
          <img src={newdata[key].image_location} alt="img" className="attraction_img"/>
        </Col>
      </Row>
    )
  }) : (countrydata === null && loading === false) ? 
      <div className="horiz_center"><span className="nodata_lbl">No data</span>
    </div> : null
}