运行反应本机代码时，我超出了最大深度

Question

import { StyleSheet, Text, View, ImageBackground, SafeAreaView } from 'react-native';
import react, {useState} from 'react';
import InputComponent from './sharedComponent/InputComponent';
import ButtonComponent from './sharedComponent/ButtonComponent';
export default function App() {
    const[text, setText] = useState('');
    const[todoList, setToDoList] = useState([]);
  return (
   <ImageBackground
   source={require('./assets/todoimages.png')}
   style={{width: '100%', height: '100%'}}
   >
     <SafeAreaView>
       <View style={styles.container}>
        <InputComponent onchangeValue={setText} 
        />
        <ButtonComponent
         addItem={setToDoList}
         itemToAdd={text}
        />
        </View>
        <View>
        {todoList.length > 0 && todoList.map((value) => <Text>{value}</Text>)}
        </View>
     </SafeAreaView>
   </ImageBackground>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'baseline',
    justifyContent: 'center',
    paddingBottom:'10%'
  },
});

我收到错误：错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。任何人都可以告诉我为什么会收到错误消息以及解决方案是什么？

下面是按钮组件：

import {View,Button, StyleSheet} from 'react-native';

const ButtonComponent = (props) =>{
    return(
        <View style={styles.container}>  
        <View style={styles.buttonContainer}>  
            <Button  
                onPress={props.addItem(prevArray=> [...prevArray, props.itemToAdd])}  
                title="ADD"  
            />  
        </View>  
        </View>
    )
}

const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        justifyContent: 'center',  
    },  
    buttonContainer: {  
        margin: 20  
    },  
})  

export default ButtonComponent;

下面是输入组件：

import { Text, TextInput, View } from 'react-native';

const InputComponent = (props)=>{
    return(
        <TextInput
        style={{height: 40, backgroundColor:'white'}}
        placeholder="add the item in to do list"
        onChangeText={newText => props.onchangeValue(newText)}
      />
    )
}
export default InputComponent;

Answer 1

您必须像这样在 buttonComponent 的 onPress 方法中使用 arrow-functions：

onPress={()=>props.addItem(...)}

运行反应本机代码时，我超出了最大深度

I am getting maximum depth exceeded while running react native code

reactjs

react-native

expo

运行 反应本机代码时，我超出了最大深度

I am getting maximum depth exceeded while running react native code

reactjs

react-native

expo

运行反应本机代码时，我超出了最大深度