React Native 中的 this.setState 超出了最大更新深度

Question

我正在尝试增加一个变量“this.state.id”。但是当我尝试这样做时，我遇到了错误

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

基本上，我的代码就是这样

state={
    visibleModal: null,
    data:[],
    id: 0,
    
  }


  checkId() {
    this.setState({id: this.state.id + 1})
    return (this.state.id);
  }

渲染中()

   <FlatList
      data={this.state.data}
      style={styles.container}
      renderItem={this.RenderLayout}
      numColumns="1"
      extraData={this.state}
      id={this.checkId(this.state.id)}
    />

但我不明白为什么会出现此错误。我已经尝试在函数“this.renderLayout”中增加增量，但我也犯了同样的错误。任何人都知道为什么我有那个？或者也许是解决方案？

Answer 1

Clore Nora，你在使用箭头函数时犯了一个小错误

您的代码

   <FlatList
  data={this.state.data}
  style={styles.container}
  renderItem={this.RenderLayout}
  numColumns="1"
  extraData={this.state}
  id={this.checkId(this.state.id)}
/>

据此更新

   <FlatList
  data={this.state.data}
  style={styles.container}
  renderItem={this.RenderLayout}
  numColumns="1"
  extraData={this.state}
  id={()=>this.checkId(this.state.id)}
/>

和 checkId 函数这样使用

  checkId=()=> {
this.setState((prevState)=>({id: prevState.id + 1}));

}

React Native 中的 this.setState 超出了最大更新深度

maximum update depth exceeded with a this.setState in React Native

react-native

react-native-flatlist