Reactjs 下拉菜单在每次单击时重新显示所有下拉项

环境

• 反应16.0.0
• 反应带5.0.0

形势

我正在使用组件

非受控下拉-->下拉切换-->下拉菜单-->下拉项

。对于

DropdownItem

我需要向它传递一个函数，以便它更改其父级的状态（这是它自己的prop值）。这是因为我希望

dropdownttoggle

元素显示所选

DropdownItem

的值。为此，父组件保存所选的

DopdownItem

的值，并将其作为道具传递给

dropdownttoggle

我用两种不同的方式做了这件事，但结果都是一样的。每当我从下拉列表中单击其中一个

下拉项时，它们都会被重新渲染，我不明白为什么。请注意，该列表包含500多个下拉项，重新渲染会给它带来一点延迟

代码

选项A

export default class Father extends React.Component {
    ...
getDropdown = () => {
        const dropdownItems = this.state.retailers.map(retailer => {
            console.log("rendering");
            return <Di key={retailer} retailer={retailer} active={false} itemClick={this.setRetailer} />
        });
        return (
            <UncontrolledDropdown size="lg" className="dropdown-pim">
                <DropdownToggle tag="h3" className="dropdowntoggle-pim text-left" caret={false}>
                    {this.state.retailer} <i className="fa fa-angle-down"></i>
                </DropdownToggle>
                <DropdownMenu className="rounded">
                    {dropdownItems}
                </DropdownMenu>
            </UncontrolledDropdown>
        );
    }

}

class Di extends React.Component {

    handleClick = () => {
        this.props.itemClick(this.props.retailer);
    }

    render() {
        return (<DropdownItem onClick={this.handleClick}
                              active={this.props.active}
                              className="btn-pim rounded">
            {this.props.retailer}
        </DropdownItem>);
    }
}

导出默认类.Component{
...
getDropdown=（）=>{
const dropdownItems=this.state.retailers.map（retailer=>{
控制台日志（“呈现”）；
返回
});
返回(
{this.state.retailer}
{dropdownItems}
);
}
}
类Di扩展了React.Component{
handleClick=（）=>{
this.props.itemClick（this.props.retailer）；
}
render（）{
返回(
{this.props.retailer}
);
}
}

我这样做的原因之一是为了避免必须创建多个箭头函数才能传递“handleClick”值。这就是我在选项B中所做的

选项B

getDropdown = () => {
        const dropdownItems = this.state.retailers.map(retailer => {
            console.log("rendering");
            return (<DropdownItem onClick={() => {this.setRetailer(retailer)}}
                                  active={false}
                                  className="btn-pim rounded"
                                    key={retailer}>
                    {retailer}
                    </DropdownItem>);
        });
        return (
            <UncontrolledDropdown size="lg" className="dropdown-pim">
                <DropdownToggle tag="h3" className="dropdowntoggle-pim text-left" caret={false}>
                    {this.state.retailer} <i className="fa fa-angle-down"></i>
                </DropdownToggle>
                <DropdownMenu className="rounded">
                    {dropdownItems}
                </DropdownMenu>
            </UncontrolledDropdown>
        );
    }

getDropdown=（）=>{
const dropdownItems=this.state.retailers.map（retailer=>{
控制台日志（“呈现”）；
返回（{this.setRetailer（retailer）}
活动={false}
className=“btn pim四舍五入”
密钥={零售商}>
{零售商}
);
});
返回(
{this.state.retailer}
{dropdownItems}
);
}


在两个编码选项上，第一次出现“rendering”消息一次，这很好，但每当我单击
Di
s中的一个时，它都会再次被重新渲染。这就是应该发生的事吗？我真的不确定我做错了什么。
更改父级中的状态（通过传递的处理程序）会导致父级重新排序（按设计）。您可以通过
shouldComponentUpdate
来避免这种情况