如何访问另一个JSON对象数组中的JSON对象数组的第一个元素

Question

我有一个react组件。它得到一个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问题之后，我制作了组件渲染函数：

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>
);
}

它说CCD_ 2是未定义的。我甚至尝试过Object.keys(item.images)[0].imageData和Object.entries(item.images)[0].imageData，它们都有类似的错误消息。有人愿意指出我做错了什么吗？

Answer 1

itemList中的某些条目可能没有图像，这将导致您看到的错误。为了说明这些条目，我们可以使用条件属性访问。

在渲染中尝试item.images[0]?.imageData，当images[0]不存在时，这将使执行短路。

这个答案最初问的是JSON.parse(itemList)，这就是顶部评论所指的。这不是OP遇到的问题。