在useState问题之前调用了React useCallback

Question

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

然而，我遇到了一个问题，当我选中today和tomorrow的复选框时，handleSubmit函数外的实际状态为true，而在handleSubmit函数中，today和tomorrow都为false，我不知道如何在useCallBack钩子中呈现实际状态。因此，useCallBack中的today和tomorrow将始终为假

请有人看看我哪里出了问题，并帮助我解决这个钩子问题。非常感谢。

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处理程序将有一个过时的闭包over state？

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>
}
}