主页 / coding / 问题 / 79420542
Accepted
Tony
Asked: 2025-02-07 18:29:12 +0800 CST

打字稿中的依赖下拉框不起作用

  • 772

我是 Typescript React 的新手，我试图创建两个从属选择框来从 API 中获取数据，但遇到了一点困难。当我在类别中选择颜色时，我只希望在产品下拉菜单中选择颜色，但我也得到了所有其他产品，而且它在一个选项中水平显示所有颜色。这是我到目前为止尝试过的方法。

在此处输入图片描述

我的 MongoDB 结构

  "_id": {
    "$oid": "679a70442a02723a1ad65e5d"
  },
  "categoryName": "Colours",
  "productName": [
    {
      "productName": "Red"
    },
    {
      "productName": "Blue"
    },
    {
      "productName": "Yellow"
    },
    {
      "productName": "Green"
    }
  ],
  "productQuantity": 90,
  "ordUpdated": {
    "$date": "2025-01-29T18:15:32.969Z"
  },
  "isInStock": false,
  "_class": "com.softoffice.portal.model.OrderDTO"

打字稿

export const DependentDropdown = () => {
  const [selectedCateogary, setSelectedCategory] = useState('');
  const [selectedProd, setSelectedProd] = useState([]);

  const { data } = useQuery({
    queryKey: ["ordlist"],
    queryFn: () => fetch("http://localhost:8080/portal")
      .then((res) => res.json())
  })

  const products = data?.map((row: any) => ({
    productName: row.productName?.map((p: { productName: string; }) => p.productName)
  }))

  const handleChange = (id:string) => {
    const pd = products.filter((c: any) => c.categoryName === id);
    setSelectedProd(pd);
  }

  return (
    <div>
      <InputLabel id="demo-simple-select-label">Category</InputLabel>
      <select className='select' onChange={(e) => handleChange(e.target.value)} >
    <option>Select Category</option>
    {data?.map((row: { categoryName: any }) => (
      <option>{row.categoryName}</option>
    ))}
      </select>

      <InputLabel id="demo-simple-select-label">Product</InputLabel>
      <select className='select' >
    <option>Select Product</option>
    {data?.map((row: { productName: any }) => (
      <option>{row.productName?.map((p: { productName: string; }) => p.productName)}</option>
    ))}
      </select>
    </div>
  );
}
mongodb

1 个回答

  1. Best Answer

    您可以尝试使用不同的方法处理handleChangeCategory，如下所示：

     const handleCategoryChange = (categoryName: string) => {
setSelectedCategory(categoryName);

// Find the selected category in data and get its product names
const selectedCategoryData = data?.find(
  (item: any) => item.categoryName === categoryName
);

if (selectedCategoryData) {
  // Extract product names as an array of strings
  const productNames = selectedCategoryData.productName.map(
    (p: { productName: string }) => p.productName
  );
  setSelectedProducts(productNames);
} else {
  setSelectedProducts([]); // Reset if no matching category
}

    };

    然后稍微重构一下选择产品组件的代码，如下所示：

    <label>Product</label>
  <select className="select">
    <option>Select Product</option>
    {selectedProducts.map((product, index) => (
      <option key={index} value={product}>
        {product}
      </option>
    ))}
  </select>
    • 1

相关问题