传递参数时，React Native Maximum Call Stack超过

Question

我收到一个奇怪的错误。我有以下一点代码。

<View style={styles.optionBarItem}>
                        <TouchableOpacity style={styles.optionBarItemWrapper} onPress={this.onIconPress("Events")} >
                          <Image source={imageMessages} style={{width: 20, height: 20}}/>
                          <Text style={[styles.optionBarItemText]}>MESSAGES(3)</Text>
                        </TouchableOpacity>
                    </View>



onIconPress( type = "" ){

    if(type == "Events"){
        this.setState({  iconOn: "Events"  });
    }
    else if(type == "Messages"){
        this.setState({  iconOn: "Messages"  });
    }
    else if(type == "Person"){
        this.setState({  iconOn: "Person"  });
    }
    else if(type == "Parcel"){
        this.setState({  iconOn: "Parcel"  });
    }

  }

如果我运行上面的代码，模拟器会停止并抛出超出最大调用堆栈的错误。

但是，如果我进行以下更改并且不包含参数，则运行正常。

onPress={this.onIconPress()

任何人都可以解释为什么会这样吗？

由于

Answer 1

您在每个渲染中调用onIconPress函数并将结果传递给onPress道具。因此在渲染中称为onIconPress，它设置状态并触发其他渲染，再次调用onIconPress等等......因此Maximum Call Stack exceeded错误。

您需要在此处传递一个函数，该函数将在按下事件时调用。例如，您可以创建内联箭头函数，该函数使用参数：

调用onIconPress

onPress={() => this.onIconPress("Events")}