React Native useCallback钩子状态同步异常问题求助

看起来你遇到的核心问题是导航选项中引用的handleSubmit回调没有更新到最新版本，导致它始终捕获的是初始状态值。另外你的代码里还有几个小笔误也需要先修正，咱们一步步来解决：

1. 先修复代码中的基础错误 #

• 第一个CheckBox的checked属性写错成了world，应该对应today状态
• 组件定义是Choose但导出成了ChooseToAdd，命名要统一
• tomorrow的拼写前后不一致（代码里混了tommorow和tomorrow），统一拼写避免混淆

2. 核心问题：导航选项中的回调未更新 #

你已经用useCallback正确声明了handleSubmit并添加了依赖，但问题出在navigationOptions——它是静态配置，只会在组件初始化时读取一次handleSubmit参数。后续即使你在useEffect里更新了params，导航栏的按钮依然引用的是旧版本的回调。

解决方案：确保导航按钮能拿到最新的回调 #

我们可以用useFocusEffect（React Navigation提供的钩子）替代普通的useEffect，确保每次页面聚焦时都更新导航参数，这样导航栏的按钮总能拿到最新的handleSubmit：

import React, { useState, useCallback, useFocusEffect } from 'react'
import { View, TouchableOpacity, Text, Alert } from 'react-native'
import { CheckBox } from 'react-native-elements'

// 统一组件命名
const ChooseToAdd = (props) => {
  const [today, setToday] = useState(false)
  // 统一拼写tomorrow
  const [tomorrow, setTomorrow] = useState(false)

  // 使用useFocusEffect，每次页面聚焦时更新导航参数
  useFocusEffect(
    useCallback(() => {
      props.navigation.setParams({ handleSubmit: handleSubmit })
    }, [handleSubmit])
  )

  console.log(`外部today is ${today}`)

  const handleSubmit = useCallback(() => {
    console.log(`内部today is ${today}`)
    if (today) {
      Alert.alert('You selected today')
    } else if (tomorrow) {
      Alert.alert('You selected tomorrow')
    }
  }, [today, tomorrow])

  return (
    <View>
      {/* 修复checked属性 */}
      <CheckBox checked={today} onPress={() => setToday(!today)} title='Today' />
      <CheckBox checked={tomorrow} onPress={() => setTomorrow(!tomorrow)} title='Tomorrow' />
    </View>
  )
}

ChooseToAdd.navigationOptions = ({ navigation }) => {
  // 修正navigation参数的获取方式
  const submit = navigation.getParam('handleSubmit')
  return {
    headerRight: () => (
      <TouchableOpacity onPress={submit}>
        <Text>Submit</Text>
      </TouchableOpacity>
    )
  }
}

export default ChooseToAdd

为什么这样能解决问题？ #

• useFocusEffect会在页面每次获得焦点时执行，确保导航参数里的handleSubmit始终是最新版本（因为useCallback会在today/tomorrow变化时生成新的回调）
• 修复了所有笔误后，状态的更新和读取就能保持一致了

另外，如果你使用的是React Navigation 5及以上版本，更推荐使用navigation.setOptions直接在组件内设置导航栏按钮，这样能更直接地获取最新的回调，避免参数传递的问题。比如：

// 在组件内部直接设置headerRight，无需依赖navigation params
useFocusEffect(
  useCallback(() => {
    props.navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity onPress={handleSubmit}>
          <Text>Submit</Text>
        </TouchableOpacity>
      )
    })
  }, [handleSubmit])
)

这样就完全不需要在navigationOptions里处理参数了，代码更简洁也更可靠。

内容的提问来源于stack exchange，提问作者Dilhan Bhagat