Блог

Главная - Вопросы по программированию - Визуализировано больше крючков, чем во время предыдущего рендеринга.(исключение компонента)

Визуализировано больше крючков, чем во время предыдущего рендеринга.(исключение компонента)

#reactjs #react-native

Вопрос:

Мой код(краткая форма)

 import..
export default function App({ navigation }) {
   function HomeScreen({ navigation }) {
   ...
   }
   const [ItemURL, setItemURl] = useState('URL')
   return (
        <ItemContext.Provider value={ItemURL}>
            ...
        </ItemContext.Provider>
    )
}

Я пытаюсь добавить контекстный API в свое приложение. Я получаю эту ошибку при попытке добавить useState.

Полный код

 export default function App({ navigation }) {
    function HomeScreen({ navigation }) {
        const [WantLogIn, setWantLogIn] = useState(false)
        const [OpenAnimation, setOpenAnimation] = useState(0)

        useEffect(() => {
            ...
        }, [OpenSetting])

        useEffect(() => {
            ...
        }, [ItemOpen])

        useEffect(() => {
            ...
        }, [OpenAnimation])
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                ...
            </View>
        )
    }    
    
    const [loaded1] = useFonts({
        Poppins_Bold: require('./assets/fonts/Poppins-Bold.ttf'),
    })
    if (!loaded) {
        return null
    } else {
        setCustomText(customTextProps)
    }
    if (!loaded1) {
        return null
    }
    const [ItemURL, setItemURl] = useState('URL')

    return (
        <ItemContext.Provider value={ItemURL}>
            <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
                <NavigationContainer>
                    <Stack.Navigator headerMode='none' mode='model' screenOptions={{}}>
                        
                    </Stack.Navigator>
                </NavigationContainer>
            </ApplicationProvider>
        </ItemContext.Provider>
    )
}

Это мой полный код и удалены некоторые ненужные вещи.Я использовал навигацию react в этом приложении(это создает какие-либо проблемы).

Когда я помещаю константу ItemURL поверх другой константы функции приложения, она начинает работать.

Комментарии:

1. Можете ли вы поделиться всем своим кодом? Например, рабочий стол

2. хорошо, позвольте мне отредактировать.

3. Я добавил свой полный код. (не удалось добавить полный код, поэтому удалили некоторые ненужные вещи)

4. ваш рабочий стол находится внутри вашего приложения. Извлеките его и поместите снаружи.

5. Да, я это сделал. но не повезло

Ответ №1:

Вы используете функцию useState('URL') после проверки loaded . Если функция не загружена, она возвращает значение null и ничего не отображается, но также никогда не достигается последнее состояние использования.

Теперь, если шрифты загружены, возвращаемое состояние не вызывается, а вызывается состояние использования. Теперь у вас другое количество звонков с крючками, что запрещено.

Переместите состояние использования выше раннего возврата (!загружено).

 export default function App({ navigation }) {
    function HomeScreen({ navigation }) {
        const [WantLogIn, setWantLogIn] = useState(false)
        const [OpenAnimation, setOpenAnimation] = useState(0)

        useEffect(() => {
            ...
        }, [OpenSetting])

        useEffect(() => {
            ...
        }, [ItemOpen])

        useEffect(() => {
            ...
        }, [OpenAnimation])
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                ...
            </View>
        )
    }    
    
    const [loaded1] = useFonts({
        Poppins_Bold: require('./assets/fonts/Poppins-Bold.ttf'),
    })

    const [ItemURL, setItemURl] = useState('URL') // MOVE THIS UP

    if (!loaded) {
        return null
    } else {
        setCustomText(customTextProps)
    }
    if (!loaded1) {
        return null
    }

    return (
        <ItemContext.Provider value={ItemURL}>
            <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
                <NavigationContainer>
                    <Stack.Navigator headerMode='none' mode='model' screenOptions={{}}>
                        
                    </Stack.Navigator>
                </NavigationContainer>
            </ApplicationProvider>
        </ItemContext.Provider>
    )
}
Метки: ,