javascript - native :超过最大更新深度，并且调用箭头功能为常规功能

首先，对不起我的英语不好。我正在编码一个函数，并且有错误：Maximum update depth exceeded here is error image

这是代码原因错误：
我有一个箭头功能，可以在触摸onPress后更改状态值

toggleEdit = () => {
      setTimeout(() => {
      this.setState({
          isEdit: !this.state.isEdit
      })}, 150 )
  }

这是渲染功能：

render() {
    return (
      <View style={styles.body}>
        <View style={styles.headerTitle}>
          <View>
            <TouchableOpacity onPress={this.buttonLeft}>
              <Icon
                name="chevron-left"
                type="evilicon"
                color="#FFFFFF"
                size={calcScale(62)}
              />
            </TouchableOpacity>
          </View>
          <View>
            <Text style={styles.titleFont}>
              {constQuotes.constQuoteAmount.label_title}
            </Text>
          </View>
          <View style={{marginLeft: 'auto', marginRight: calcScale(17)}}>
            <TouchableOpacity onPress={this.toggleEdit}>
              <Text style={styles.titleAction}>
                {!this.state.isEdit ? `Edit` : `Cancel`}
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }

当我用onPress={this.toggleEdit}调用toggleEdit时，函数运行正常，
但是我用onPress={this.toggleEdit()}称呼它：

<View style={{marginLeft: 'auto', marginRight: calcScale(17)}}>
            <TouchableOpacity onPress={this.toggleEdit()}>
              <Text style={styles.titleAction}>
                {!this.state.isEdit ? `Edit` : `Cancel`}
              </Text>
            </TouchableOpacity>
          </View>

我有错误Maximum update depth exceeded

两种方式有什么区别？为什么会有这个错误？
请帮我，谢谢！

最佳答案

编辑：您的错误是因为您正在使用onPress创建循环。


  当我使用onPress = {this.toggleEdit}调用toggleEdit时，函数运行
  好的，但是我用onPress = {this.toggleEdit（）}来称呼它：


这是javascript工作方式的关键点。您的第一个示例是正确的示例。它的本质是说“当我按此键时，运行功能this.toggleEdit()”。第二个示例是“当我按此键时，运行this.toggleEdit()返回的功能”。在您的特定情况下，toggleEdit()不返回函数。它会产生效果。并且由于render()中的所有内容都会在任何效果发生时随时运行，因此该功能将永远运行。

附带说明：（原始答案）
记住那个state updates may be asynchronous。因为要在setState调用中更新状态，所以需要使用函数形式。

toggleEdit = () => {
      setTimeout(() => {
      this.setState(state => {
          isEdit: !state.isEdit
      })}, 150 )
  }