Javascript 获得相同 ID 的对象

我正在从GraphQL后端提取数据.这是我正在收集的数据.

{
  "data": {
    "product": {
      "attributes": [
        {
          "id": "Capacity",
          "items": [
            {
              "id": "256GB",
              "displayValue": "256GB"
            },
            {
              "id": "512GB",
              "displayValue": "512GB"
            }
          ]
        },
        {
          "id": "With USB 3 ports",
          "items": [
            {
              "id": "Yes",
              "displayValue": "Yes"
            },
            {
              "id": "No",
              "displayValue": "No"
            }
          ]
        },
        {
          "id": "Touch ID in keyboard",
          "items": [
            {
              "id": "Yes",
              "displayValue": "Yes"
            },
            {
              "id": "No",
              "displayValue": "No"
            }
          ]
        }
      ]
    }
  }
}

然后迭代attributes数组并给出唯一的ID _id，以区分不同的items.事实证明，ID为With USB 3 ports和Touch ID in keyboard的item的ID总是相同的.我使用的是nano 机器人.

以下是代码

import { PureComponent } from "react";
import { useParams } from 'react-router-dom';
import { Query } from '@apollo/client/react/components';
import GET_PRODUCT from "../../graphql/getProduct";
import { nanoid } from 'nanoid';
import ProductDetailComponent from "./ProductDetailComponent";
import './ProductDetail.css'


class ProductDetail extends PureComponent {
  render() {
    const { id } = this.props.params;
    const { currency, addToCart, closeCurrencyOverlay } = this.props;
    return (
      <Query
        key="yes"
        query={GET_PRODUCT}
        variables={{ id }}
        fetchPolicy="network-only"
      >
        {({ loading, data}) => {
          if (loading) return null;
          let newAttributes = [];
          data.product.attributes.map((attribute) => {
            attribute.items.map((item) => {
              item._id = nanoid(); // <-- Giving the id from here
            })
            newAttributes.push(attribute)
          })
          const newData = { ...data, attributes: newAttributes }
          return <ProductDetailComponent data={newData} currency={currency} addToCart={addToCart} closeCurrencyOverlay={closeCurrencyOverlay} id={id}/>
        }}
      </Query>
    )
  }

}

export default (props) => (
  <ProductDetail
    {...props}
    params={useParams()}
  />
);

我只是想知道为什么他们的身份证总是一样的.

Here is a screenshot of the Chrome dev tools