在useState问题之前调用react useCallback

Question

当他们按下提交时，我试图提醒用户他们根据 CheckBox 选择的选项。

但是我遇到了一个问题，当我选中 today 和 tomorrow 的复选框时，handleSubmit 函数之外的实际状态为 true，但在 handleSubmit 函数中，today 和 tomorrow 均为 false而且我不知道如何在useCallBack 钩子中渲染实际状态。因此 useCallBack 中的 today 和 tomorrow 将始终为 false

请有人看看我哪里出错并帮助我解决这个钩子问题。谢谢！！！

import React, { useEffect, useState, useCallback } from 'react'
import { CheckBox } from 'react-native-elements'
import { Alert } from 'react-native'

const Choose = (props) => {
    const [today, setToday] = useState(false)
    const [tommorow, setTommorow] = useState(false)

    useEffect(() => {
        props.navigation.setParams({ handleSubmit: handleSubmit })
    }, [handleSubmit])

    console.log(`today is ${today}`) // this works and is changed by the check box
    const handleSubmit = useCallback(() => {
        if (today == true){
            console.log(`today is ${today}`) // today from outise this function is never true
            
            Alert.alert('You selected today')
        }else if (tommorow == true){
            Alert.alert('You selected tommorow')
        }
    }, [today, tommorow])

    return (
        <View>
            <CheckBox
                checked={world}
                onPress={() => setToday(!today)}
                title='Today'
            />
            <CheckBox
                onPress={() => setTommorow(!tommorow)}
                title='Tommorow'
            />
        </View>
    )
}
export default ChooseToAdd

Choose.navigationOptions = () => {
    const submit = navigationData.navigation.getParam('handleSubmit')
    return {
        headerRight: () =>
            <TouchableOpacity onPress={submit}>
                <Text>Submit</Text>
            </TouchableOpacity>
    }
}

Answer 1

为什么不改变这个

    useEffect(() => {
        props.navigation.setParams({ handleSubmit: handleSubmit })
    }, [handleSubmit])

    console.log(`today is ${today}`) // this works and is changed by the check box
    const handleSubmit = useCallback(() => {
        if (today == true){
            console.log(`today is ${today}`) // today from outise this function is never true
            
            Alert.alert('You selected today')
        }else if (tommorow == true){
            Alert.alert('You selected tommorow')
        }
    }, [today, tommorow])

到这里

    useEffect(() => {
        const handleSubmit = () => {
            if (today == true){
                Alert.alert('You selected today')
            }else if (tommorow == true){
                Alert.alert('You selected tommorow')
            }
        }
        props.navigation.setParams({ handleSubmit: handleSubmit })
    },[today, tommorow])

Answer 2

我很好奇这是做什么的： 我在其他地方读到的建议之一是将函数声明移到组件范围之外，因为这使它们保持不变，而无需使用 useCallback。 我认为这将表现出相同的行为...我认为 setParams / submit 处理程序将对状态进行过时的关闭？

    import React, { useEffect, useState, useCallback } from 'react'
    import { CheckBox } from 'react-native-elements'
    import { Alert } from 'react-native'
    
    function handleSubmit(today,tomorrow) {
    return () => {
            if (today == true){
                console.log(`today is ${today}`)             
                Alert.alert('You selected today')
            }else if (tommorow == true){
                Alert.alert('You selected tommorow')
            }
    
    };
        }
    
    const Choose = (props) => {
        const [today, setToday] = useState(false)
        const [tommorow, setTommorow] = useState(false)
    
        props.navigation.setParams({ handleSubmit: handleSubmit(today,tomorrow) });

const handleTodayclicked() => {
setToday(!today);
props.navigation.setParams({ handleSubmit: handleSubmit(today,tomorrow) });
};

const handleTomorrowClicked() => {
setTommorow(!tommorow);
props.navigation.setParams({ handleSubmit: handleSubmit(today,tomorrow) });
}; 
   
        return (
            <View>
                <CheckBox
                    checked={world}
                    onPress={() => handleTodayclicked()}
                    title='Today'
                />
                <CheckBox
                    onPress={() => handleTomorrowClicked()}
                    title='Tommorow'
                />
            </View>
        )
    }
    export default ChooseToAdd
    
    Choose.navigationOptions = () => {
        const submit = navigationData.navigation.getParam('handleSubmit')
        return {
            headerRight: () =>
                <TouchableOpacity onPress={submit}>
                    <Text>Submit</Text>
                </TouchableOpacity>
        }
    }