重新渲染的次数过多。React 限制渲染次数以防止无限循环错误

Question

我正在尝试创建登录表单，但出现了此错误。

export default function LoginScreen(props) {
        const [Submit, setSubmit] = React.useState('')
        const windowWidth = Dimensions.get('window').width
        const windowHeight = Dimensions.get('window').height
        const [valuePass, setValuePass] = React.useState('')
        const [valueUsername, setValueUsername] = React.useState('')
        const [secureTextEntry, setSecureTextEntry] = React.useState(true)
    
        const toggleSecureEntry = () => {
            setSecureTextEntry(!secureTextEntry)
        }
        const AlertIcon = (props) => <Icon {...props} name='alert-circle-outline' />
        const renderIcon = (props) => (
            <TouchableWithoutFeedback onPress={toggleSecureEntry}>
                <Icon {...props} name={secureTextEntry ? 'eye-off' : 'eye'} />
            </TouchableWithoutFeedback>
        )
    
        return (
            <View>
                <Text>Login</Text>
                <Input
                    placeholder='Username'
                    value={valueUsername}
                    style={{ width: windowWidth - 50, borderRadius: 16 }}
                    onChangeText={(nextValue) => setValueUsername(nextValue)}
                    size='large'
                />
                <View style={{ height: 15 }}></View>
                <Input
                    style={{ width: windowWidth - 50, borderRadius: 16 }}
                    size='large'
                    value={valuePass}
                    placeholder='Password'
                    caption='Should contain at least 8 symbols'
                    accessoryRight={renderIcon}
                    captionIcon={AlertIcon}
                    secureTextEntry={secureTextEntry}
                    onChangeText={(nextValue) => setValuePass(nextValue)}
                />
                <View style={{ marginTop: 25 }}>
                    <Button
                        style={{ borderRadius: 15 }}
                        onPress={setSubmit(true)}
                        size='large'
                    >
                        Submit
                    </Button>
                </View>
            </View>
        )
    }

任何人都可以解释为什么会发生此错误？？

我是新来的反应原生。

忽略这个(只是为了加量)= =我得补充一些没用的句子因为StackOverflow给我< code > '看起来你的帖子大部分是代码；请再补充一些细节。(对这个stackoverflow错误感到非常沮丧)

Answer 1

对于Button的onPress道具，您应该传递一个函数，而不是直接传递一个实例。我的意思是这样的；

<Button onPress={() => setSubmit(true)} />

对执行相同操作

当安装组件时，会检查onPress，当您调用setSubmit时，会在内部反复更改状态，但当您传递函数并在那里执行操作时，它会等待单击，因为当按下按钮时， 会调用回调函数。

Answer 2

问题出在你的新闻道具上

onPress={setSubmit(true)}

花括号之间的所有内容都会立即被计算。因此，setSubmit函数在每个渲染循环中都被调用。

通过使用箭头函数包装函数，计算的代码将生成一个函数，用户只要单击按钮，就可以调用该函数。

所以应该是

onPress={()=>{setSubmit(true)}}