[英]How do I access first element of JSON object array that is in another JSON object array?
我有一个反应组件。 它得到一个json
数组。
[
{
"itemNumber": "11BRC",
"itemDescription": "Flat head Phillips Wood screw C-Pak 2x1/4",
"featured": false,
"categoryName": "Screws",
"price": 4.74444444,
"qtyOnHand": 22409.00000,
"images": [
{
"itemnmbr": "11BRC",
"fileseq": 16384,
"filename": "Oval Head Slotted Wood Screws.jpg",
"imageData": "/9j/4Q4nRXhpZgAATU0AKgAAAAgADAEOAAIAAAAgAAAAngEPAAIAAAASAAAAvgEQAAIAAAAKAAAA0AESAAMAAAABAAEAAAEaAAUAAAABAAAA2gEbAAUAAAABAAAA4gEoAAMAAAABAAIAAAExAAIAAAAgAAAA6gEyAAIAAAAUAAABCgITAAMAAAABAAIAAIdpAAQAAAABAAABIIglAAQAAAABAAADBAAAAxggICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgAE5JS09OIENPUlBPUkFUSU9OAE5JS09OIEQxWAAALcbAAAAnEAAtxsAAACcQQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaAAyMDEyOjA0OjA1IDE0OjI1OjA2AAAAABmCmgAFAAAAAQAAAlKCnQAFAAAAAQAAAlqIIgADAAAAAQABAACQAAAHAAAABDAyMTCQAwACAAAAFAAAAmKQBAACAAAAFAAAAnaRAQAHAAAABAECAwCRAgAFAAAAAQAAAoqSBAAKAAAAAQAAApKSBQAFAAAAAQAAApqSBwADAAAAAQADAACSCgAFAAAAAQAAAqKShgAHAAAAMAAAAqqSkAACAAAAAzE3AACSkQACAAAAAzE3AACSkgACAAAAAzE3AACgAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAABzWgAwAEAAAAAQAABBqgBQAEAAAAAQAAAuSiFwADAAAAAQACAACjAAAHAAAAAQMAAACjAQAHAAAAAQEAAACjAgAHAAAACAAAAtoAAAAAAAAACgAABOIAAAAAAAAACjIwMTE6MDM6MTQgMTA6MTA6NTEAMjAxMTowMzoxNCAxMDoxMDo1MQAAAAAEAAAAAQAAAAAAAAAGAAAAAAAAAAoAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAICAQEAAAAAAgABAAIAAAAEUjk4AAACAAcAAAAEMDEwMAAAAAAAAAABAAAAAQAAAAQCAAAAAAAAAAAAAAYBAwADAAAAAQAGAAABGgAFAAAAAQAAA2YBGwAFAAAAAQAAA24BKAADAAAAAQACAAACAQAEAAAAAQAAA3YCAgAEAAAAAQAACqkAAAAAAAAASAAAAAEAAABIAAAAAf/Y/+0ADEFkb2JlX0NNAAH/7gAOQWRvYmUAZIAAAAAB/
...
在阅读了这些 StackOverflow 问题如何访问 JSON 对象数组的第一个元素和访问 json 数组的第一个元素(还有很多)之后,我制作了组件渲染功能:
render() {
const items = this.state.itemList;
return (
<table className="table table-striped table-bordered">
<thead>
<tr>
<th>Item Number</th>
<th>Item Description</th>
<th>Item Image</th>
</tr>
</thead>
<tbody>
{items && items.map (item =>
<tr key={item.itemNumber}>
<td>{item.itemNumber}</td>
<td>{item.itemDescription}</td>
<td><img className="fit-picture" src={"data:image/png;base64," + item.images[0].imageData} id={item.itemNumber + "Img"} alt={item.itemNumber} /></td>
</tr>
)}
</tbody>
</table>
);
}
...它说item.images[0]
是未定义的。 我什至尝试过Object.keys(item.images)[0].imageData
和Object.entries(item.images)[0].imageData
,每个都有类似的错误消息。 有人愿意指出我做错了什么吗?
itemList
某些条目可能没有图像,这会导致您看到的错误。 为了说明这些条目,我们可以使用条件属性访问。
在渲染中尝试item.images[0]?.imageData
,这将在images[0]
不存在时短路执行。
这个答案最初要求JSON.parse(itemList)
,这是最高评论所指的内容。 这不是 OP 遇到的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.