單擊下拉選項時如何顯示相關數據？

Question

我有一個來自查詢的下拉列表，當我單擊該選項時，應顯示相關數據。 我有這個下拉菜單，如圖所示

.

如何只顯示一次選項。

我有以下代碼：

 class StoreLocator extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            options : [],
        }
    }

    getStoreLocatorDropdown(){
        return(
            <div>
                <select>
                     <option value="" hidden>Select product/service type</option>
                    {
                        this.state.options.map((obj) => {
                            return <option value={obj.id} changeOption={this.handleChange}>{obj.name}</option>
                        })
                    }
                </select>
            </div>
        )
    }

    handleChange(){
        console.log("clicked")
    }


    async componentDidMount(){
        let storeLocatorQuery = StoreLocatorInstance.getStoreLocator()
        await fetchQuery(storeLocatorQuery).then((data) => {
           this.setState({
               options : data.storeLocatorLocations.items
           })
           this.getStoreLocatorDropdown()
        },
        (error) => console.log(error)
        )
        
    }

    render() {
        return (
            <div>
                <h1>Store Locator</h1>
                <div>
                    {this.getStoreLocatorDropdown()}
                </div>
            </div>
        )
    }
}

export default StoreLocator

如何在重復值時僅顯示一次選項。 以及如何使其可點擊並顯示其相關數據

Answer 1

似乎您要做的只是在下拉列表中顯示唯一/不同的選項。

您可以解決此問題的一種手動方法是首先過濾您的選項數據源。 在您的情況下，它是“this.state.options”

在您的“componentDidMount”function 中，您可以在將值設置到 state 之前對其進行過濾：

 var data = [
  { id: 1, name: 'Partsandservices' }, 
  { id: 2, name: 'Partsandservices' }, 
  { id: 3, name: 'Petromin' }
];

data.map(item => item.name)
  .filter((value, index, self) => self.indexOf(value) === index)
// this should return you ["Partsandservices", "Petromin"]

但是，這不是推薦的方法，因為這種重復的根本原因應該從最深層次解決，即“StoreLocatorInstance.getStoreLocator()”。

由於返回的選項是“Partsandservices”上的重復名稱，它是否包含不同的含義？

可能是位置 A 的 Partsandservices 和位置 B 的 Partsandservices？ 還是將兩個相同的名稱返回到您的應用程序是一個錯誤？

你應該檢查一下。

Answer 2

要阻止重復值顯示在您的選項列表中，您可以添加一個額外的數組（duplicateCheck），以確保這些值不會重復
在您的選項列表中：

let duplicateCheck=[];

 this.state.options.map((obj) => {
if(duplicateCheck.includes(obj.name))
{
 return (null); 
}
else
{
duplicateCheck.push(obj.name);  
return <option value={obj.id} changeOption={this.handleChange}>{obj.name}</option>}

} 
                  

  })