最大更新深度超过了新状态 React-Native答案

【问题标题】：Maximum update depth exceeded new state React-Native最大更新深度超过了新状态 React-Native
【发布时间】：2022-01-16 10:00:48
【问题描述】：

const [number,setNum] = useState(0);当我想添加和更改它时出现此错误（setNum（number+1））。我的错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。我有什么办法解决这个问题？

const App = ()=>{
  const [text,setText] = useState('');
  const [todo,setToDo] = useState([]);
  const [number,setNum] = useState(0);
  const renderToDoCard = ({item})=>{
    setNum(number+1)
    return(
    <TouchableHighlight
      onLongPress={() => handleLongPress(item)}>
      <ToDoCard todo={item} number={number}/>
    </TouchableHighlight>
  )
  }
  const handleLongPress = item => {
    setToDo(todo.filter(i => i !== item));
    return Alert.alert('Silindi');
  };
  return(
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor='#102027'/>
      <View style={styles.head_container}>
        <Text style={styles.title}>Yapılacaklar</Text>
        <Text style={styles.title}>{todo.length}</Text>
      </View>
      <View style={styles.body_container}>
        <FlatList data={todo} renderItem={renderToDoCard} />
      </View>
      <View style={styles.bottom_container}>
        <ToDoInput todo={todo} setToDo={setToDo} text={text} setText={setText}/>
      </View>
    </SafeAreaView>
  )
}

【问题讨论】：

标签： javascript android ios react-native

【解决方案1】：

您已经创建了一个无限更新循环。

问题在于您如何在renderToDoCard 中更新number 状态

const renderToDoCard = ({item}) => {
  setNum(number + 1); // This is the problem, remove this line
  return (
    <TouchableHighlight onLongPress={() => handleLongPress(item)}>
      <ToDoCard todo={item} number={number} />
    </TouchableHighlight>
  );
};

当renderToDoCard 呈现时，您会更新App 组件的状态，因此它会重新呈现App，它会呈现renderToDoCard，它会更新您的App 组件的状态，因此它会重新呈现App，它会呈现renderToDoCard ...

这个过程会一直重复，直到达到最大更新深度。

只需删除 setNum(number + 1); 即可解决该问题。

在我看来，从您的代码来看，您使用 number 状态的所有目的都是为了跟踪当前项目索引，以便您可以将其传递给 ToDoCard 组件。 FlatList 的 renderItem 还提供对当前项目索引的访问，您可以将其传递给 ToDoCard 的 number 属性

renderItem({ item, index, separators });

https://reactnative.dev/docs/flatlist#required-renderitem

所以你可以改为这样做

const renderToDoCard = ({item, index}) => {
  return (
    <TouchableHighlight onLongPress={() => handleLongPress(item)}>
      <ToDoCard todo={item} number={index} />
    </TouchableHighlight>
  );
};

您可以为todo 中的每个项目添加一个键，并使用它来代替索引。

【讨论】：