单击下拉选项时如何显示相关数据？

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>}

} 
                  

  })