Question

我有一个父组件<FilterGroupSection>，它实例化了<RuleGroup />个子组件的集合：

return Object.values(this.props.filterGroups).map(function(ruleGroup) {
    const key = ruleGroup.id;
    return (
        <React.Fragment key={key}>
            <RuleGroup
                id={key} 
                key={key} 
                deleteRuleGroup={(e) => this.deleteRuleGroup(key, e)}
            />
            <Grid.Row></Grid.Row> {/*empty row to create space between filter groups*/}
        </React.Fragment>

    )
}.bind(this))

这工作正常且符合预期。

我难以将处理函数传递给<RuleGroup />，deleteRuleGroup={(e) => this.deleteRuleGroup(key, e)}

在<FilterGroupSection />组件处理程序函数中：

deleteRuleGroup(id, e) {
    console.log('delete rule group called')

    this.props.filterGroupDeleted({filterGroupId: id})
}

我注释了this.props.filterGroupDeleted({filterGroupId: id})，并且行为符合预期，这使我相信该函数在重新呈现组件时会运行多次。

在<RuleGroup />组件中的deleteRuleGroup函数：

<Button                   
    color={"teal"} 
    size={"tiny"}
    onClick={(e) => this.props.deleteRuleGroup(id, e)}
>

单击按钮时，将继续调用处理程序函数，直到显示 RangeError：超出最大调用堆栈大小错误为止。如何确保单击按钮时仅一次处理程序函数？

谢谢

为什么我的onClick处理程序会多次触发？

0 个答案: