如何根据json填充类别和子类别？答案

【问题标题】：How to populate category and subcategory based on json?如何根据json填充类别和子类别？
【发布时间】：2021-11-07 14:25:55
【问题描述】：

我正在创建这个管理表单，其中类别和子类别将是下拉选择，选项将来自给定的 Json (categories.json)，并且在创建时选择类别后将填充相应的子类别产品。例如，如果我选择了 category_slug 男装，那么会出现 T 恤等子类别。如何在 React 上做到这一点？ json文件

 {
    "categories": [
        {
            "id": "1",
            "name": "Men's Fashion",
            "category_slug": "men's-fashion",
            "category_type": "product",
            "child_categories": [
                {
                    "id": "2",
                    "name": "T-Shirt",
                    "category_slug": "t-shirt"
                },
                {
                    "id": "3",
                    "name": "Panjabi & Fatua",
                    "category_slug": "panjabi-&-fatua"
                },
                {
                    "id": "4",
                    "name": "Polo Shirts",
                    "category_slug": "polo-shirts"
                },
                {
                    "id": "5",
                    "name": "Jeans",
                    "category_slug": "jeans"
                },
                {
                    "id": "6",
                    "name": "Men's Sweaters ",
                    "category_slug": "men's-sweaters-"
                }
            ]
        },
        {
            "id": "7",
            "name": "Electronic Device ",
            "category_slug": "electronic-device-",
            "child_cat": [
                {
                    "id": "8",
                    "name": "Mobile ",
                    "category_slug": "mobile-12"
                },
                {
                    "id": "9",
                    "name": "Tablets",
                    "category_slug": "tablets"
                },
                {
                    "id": "10",
                    "name": "Laptops",
                    "category_slug": "laptops"
                },
                {
                    "id": "11",
                    "name": "Desktops",
                    "category_slug": "desktops"
                },
                {
                    "id": "12",
                    "name": "Gaming Consoles",
                    "category_slug": "gaming-consoles"
                },
                {
                    "id": "13",
                    "name": "Cameras",
                    "category_slug": "cameras"
                },
                {
                    "id": "14",
                    "name": "Security Cameras",
                    "category_slug": "security-cameras"
                },
                {
                    "id": "15",
                    "name": "Test",
                    "category_slug": "test"
                }
            ]
        },
        {
            "id": "16",
            "name": "Electronic Accessories ",
            "category_slug": "electronic-accessories-",
            "child_cat": [
                {
                    "id": "17",
                    "name": "Mobile Accessories",
                    "category_slug": "mobile-accessories"
                },
                {
                    "id": "18",
                    "name": "Wearable",
                    "category_slug": "wearable"
                },
                {
                    "id": "19",
                    "name": "Console Accessories",
                    "category_slug": "console-accessories"
                },
                {
                    "id": "20",
                    "name": "Camera Accessories",
                    "category_slug": "camera-accessories"
                },
                {
                    "id": "21",
                    "name": "Computer Accessories",
                    "category_slug": "computer-accessories"
                },
                {
                    "id": "22",
                    "name": "Storage",
                    "category_slug": "storage"
                },
                {
                    "id": "23",
                    "name": "Printers",
                    "category_slug": "printers"
                },
                {
                    "id": "24",
                    "name": "Computer Components",
                    "category_slug": "computer-components"
                },
                {
                    "id": "25",
                    "name": "Network Components",
                    "category_slug": "network-components"
                },
                {
                    "id": "26",
                    "name": "Software",
                    "category_slug": "software"
                }
            ]
        },
        {
            "id": "27",
            "name": "TV & Home Appliances",
            "category_slug": "tv-&-home-appliances"
        },
        {
            "id": "28",
            "name": "Health & Beauty",
            "category_slug": "health-&-beauty",
            "child_cat": [
                {
                    "id": "29",
                    "name": "Bath & Body",
                    "category_slug": "bath-&-body"
                },
                {
                    "id": "30",
                    "name": "Beauty Tools",
                    "category_slug": "beauty-tools"
                },
                {
                    "id": "31",
                    "name": "Fragrances",
                    "category_slug": "fragrances"
                },
                {
                    "id": "32",
                    "name": "Hair Care",
                    "category_slug": "hair-care"
                },
                {
                    "id": "33",
                    "name": "Makeup",
                    "category_slug": "makeup"
                },
                {
                    "id": "35",
                    "name": "Personal Care",
                    "category_slug": "personal-care"
                },
                {
                    "id": "36",
                    "name": "Skin Care",
                    "category_slug": "skin-care"
                },
                {
                    "id": "5f2a9798e7abc4290b6c6275",
                    "name": "Medical Supplies",
                    "category_slug": "medical-supplies"
                }
            ]
        }
    ]
}

表格。我为此使用了 chakraUI。

export default function AddProductForm() {
  return (
    <Box display='flex' justifyContent='center' alignItems='center'>
      <Box
        w={[300, 400, 600]}
        border='1px'
        boxShadow='md'
        p={5}
        rounded='md'
        bg='white'
        borderColor='gray.400'
        mx='auto'
      >
        <FormControl id='product' isRequired>
          <FormLabel>Product Name</FormLabel>
          <Input type='text' />
          <FormLabel>Category</FormLabel>   
          <Select>
            <option>United Arab Emirates</option>
            <option>Nigeria</option>
          </Select>
          <FormLabel>Sub-category</FormLabel>
          <Select>
            <option>United Arab Emirates</option>
            <option>Nigeria</option>
          </Select>
          <FormLabel>Description</FormLabel>
          <Input type='text' />
          <FormLabel>Image</FormLabel>
          <Input type='text' />
          <FormLabel>Regular Price</FormLabel>
          <Input type='number' />
          <FormLabel>Sell Price</FormLabel>
          <Input type='number' />
          <FormLabel>Stock Quantity</FormLabel>
          <NumberInput max={5} min={1}>
            <NumberInputField />
            <NumberInputStepper>
              <NumberIncrementStepper />
              <NumberDecrementStepper />
            </NumberInputStepper>
          </NumberInput>
        </FormControl>
      </Box>
    </Box>
  );
}

【问题讨论】：

标签： javascript reactjs chakra-ui

【解决方案1】：

使用useState() 挂钩来跟踪父选择的值。对于子选择，只需通过某个唯一键（在您的情况下为“id”或“slug”）找到父项，并将找到的对象的“child_categories”映射为选项标签。

您的 JSON 密钥也不一致，因此请修复它。

您的代码应如下所示：

export default function Example() {
  const [parent, setParent] = useState("");

  return (
    <div>
      {/* parent */}
      <select value={parent} onChange={(e) => setParent(e.target.value)}>
        <option value=""></option>
        {categories.map((category) => (
          <option value={category.id}>{category.name}</option>
        ))}
      </select>
      {/* child */}
      <select>
        <option value=""></option>
        {categories
          .find((x) => x.id === parent)
          ?.child_categories?.map((category) => (
            <option value={category.id}>{category.name}</option>
          ))}
      </select>
    </div>
  );
}

【讨论】：