訪問 object 中的嵌套數組返回未定義

Question

我在訪問嵌套數組的值時遇到了麻煩，我已經堅持了好幾天，希望有人能提供幫助！

我剛剛開始學習 React，我正在開發一個應用程序，該應用程序使用 graphql 和 apollo 從 Wordpress 獲取數據

我控制台數據時的數組結構：

{__typename: 'Yarn', name: 'Brick Red', yarnFields: {…}}
name: "Brick Red"
yarnFields:
yarnColor: "#cb4154"
yarnFiber: Array(1)
0: {__typename: 'Fiber', name: 'Merino'}
length: 1
[[Prototype]]: Array(0)
yarnPrice: 6.5
__typename: "Yarn_Yarnfields"
[[Prototype]]: Object
__typename: "Yarn"
[[Prototype]]: Object

graphql的數組結構：

{
  "data": {
    "yarns": {
      "nodes": [
        {
          "name": "Brick Red",
          "id": "dGVybToyNTI=",
          "yarnFields": {
            "yarnColor": "#cb4154",
            "yarnPrice": 6.5,
            "yarnFiber": [
              {
                "name": "Merino"
              }
            ]
          }
        },
        {
          "name": "Burgundy",
          "id": "dGVybToyNzg=",
          "yarnFields": {
            "yarnColor": "#662d40",
            "yarnPrice": 9.11,
            "yarnFiber": null
          }
        },
        {
          "name": "Cobalt Blue",
          "id": "dGVybToyOTQ=",
          "yarnFields": {
            "yarnColor": "#1664af",
            "yarnPrice": 7.54,
            "yarnFiber": null
          }
        },

ETC

我可以使用以下語法獲取所有其他值：

{yarn?.yarnFields?.yarnPrice}

我需要得到的值是 yarnFiber.name （如果值是“Merino”）

但是當我對 yarnFiber 使用相同的語法時，它返回 undefined

我的 JSX 代碼到 map 通過 JSON object：

 const { loading, error, data } = useQuery(YARNS_QUERY);
 if (isEmpty ( data )){
      return null;
    }

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
  
   return (
     <>


         {data.yarns.nodes.map((yarn, i) => (
              <DK key={i} yarn={yarn}/>
            
           ))} 

我顯示紗線信息的組件：

 return (
        <div>
            <div onClick={change} 
                data-color={yarn?.name}
                data-price={yarn?.yarnFields?.yarnPrice}
                data-fiber={yarn?.yarnFields?.yarnFiber?.name}
               
                style={{
                    background:yarn?.yarnFields?.yarnColor, 
                    width: '50px', 
                    height: '50px', 
                //  border:'5px dashed #2d2e2e',
                    borderRadius: '50%'}}>
     fiber: {yarn.yarnFields?.yarnFiber?.name} // returns empty
            </div>
        </div>
    );

我已經嘗試通過嵌套數組進行映射，但我似乎無法獲得正確的語法以適合我的代碼。 我什至不確定這是否是我需要做的！

任何幫助表示贊賞，但會喜歡詳細的解決方案，因為我完全是菜鳥！

更新：

yarnFiber 數組有多個值需要顯示

"name": "Burgundy",
          "id": "dGVybToyNzg=",
          "yarnFields": {
            "yarnColor": "#662d40",
            "yarnPrice": 9.11,
            "yarnFiber": [
              {
                "name": "Merino Wool"
              },
              {
                "name": "Silk"
              },
              {
                "name": "Cashmere"
              }
            ]
          }
        },

我應該如何在我的代碼中反映這一點？

再次感謝

Answer 1

yarnFiber是一個數組，所以你需要通過索引來引用它的對象：

fiber: {yarn.yarnFields?.yarnFiber && yarn.yarnFields?.yarnFiber.length > 0
  ? yarn.yarnFields?.yarnFiber[0].name
  : 'No fiber'
}