javascript - 前端：使用反应中的一些设置变量访问数组中的项目

Question

我有一个反应项目。在这个组件(AllProductSingleItem.js)中，我解构了 match 的值，作为道具接收。现在我想使用idandpersonType值来访问我的数据中的特定值。id 将是我尝试访问的项目的索引，而 personType 将是值。

数据的结构如下所示。例如，我试图像这样获取女性的价值：

data[id].personType

[
   {
      “id”:”0”,
      “ItemLogo”:”String”
      “BrandName”:”String"
      “Women”:{an array of object},
      “Men”:{an array of object},
      “Children”:{an array of object},
      “Baby”:{an array of object}
   },
   {
      “id”:”1”,
      “ItemLogo”:”String”
      “BrandName”:”String"
      “Women”:{an array of object},
      “Men”:{an array of object},
      “Children”:{an array of object},
      “Baby”:{an array of object}
   }
]

id 有一个来自 match 的值，personType 也是如此。

问题：

现在的问题是当我尝试使用上面的语法时，它返回未定义。但是当我像这样对 personType 进行硬编码时data[id].Women，我会取回数据。但我不想硬编码，因为 personType 的值会根据用户的交互而改变。

这是到目前为止的反应组件代码。它有效，但不是完全动态的：

import React, { useState,useEffect } from "react";
import { Link } from "react-router-dom";

//import database and component
import data from "../../database/database.json";

function AllProductSingleItem({ match }) {
   const [itemArray, setitemArray] = useState([])
   const [productId, setproductId] = useState(-1)

   const { id, gender, type } = match.params;

    
   const getData = () => {
      if (gender === "Women") {
         setitemArray(data[id].women)
         setproductId(id)
      } else if (gender === "Men") {
         setitemArray(data[id].men)
         setproductId(id)
      }
    }
return(){
//code
  }
}

标签： javascriptreactjsfrontend