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

Question

const[number， setNum]=useState（0）；当我想添加和更改它时，我收到了这个错误（setNum（number 1））。我的错误：超过了最大更新深度。当组件在组件WillUpdate或组件DiUpdate中重复调用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>
  )
}

Answer 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>
  );
};

当渲染ToDoCard渲染时，您可以更新应用程序组件的状态，以便它重新渲染应用程序，该应用程序呈现渲染ToDoCard，更新应用程序组件的状态，以便重新渲染呈现应用程序html" target="_blank">组件的状态ToDoCard...

重复此过程，直到达到最大更新深度。

只需删除setNum（数字1）；，该问题就会得到修复。

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

renderItem（{item， index，分隔符}）；

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

所以你可以这样做

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

或者，您可以在todo中为每个项目添加一个键，并使用该键代替索引。