React Native状态未更新：handleSave无法获取最新状态

核心问题 #

1. 变量名错误：handleSave中打印的newItem未定义，应为item。
2. 闭包陷阱：设置导航栏选项的useEffect仅依赖navigation，导致导航栏的保存按钮绑定的是初始版本的handleSave——该函数通过闭包捕获的是初始状态的item，无法获取后续更新后的状态。

优化方案 #

方案一：用useCallback固定函数引用并更新依赖

1. 导入useCallback：

import React, { useState, useEffect, useCallback } from "react";

2. 用useCallback包裹handleSave，确保状态更新时函数引用同步更新：

const handleSave = useCallback(() => {
  console.log(item); // 修正变量名
  // 此处添加你的保存逻辑
}, [item]); // 依赖item，状态更新时重新生成函数

3. 更新设置导航栏的useEffect依赖数组，加入handleSave：

useEffect(() => {
  navigation.setOptions({
    headerLeft: () => (
      <TouchableOpacity
        onPress={() => navigation.goBack()}
        style={{
          padding: 12,
          margin: -12,
        }}
      >
        <CloseIcon size={24} color="#000" />
      </TouchableOpacity>
    ),
    headerRight: () => (
      <Button title="save" onPress={handleSave} color="#000" />
    ),
  });
}, [navigation, handleSave]); // 新增handleSave到依赖

方案二：直接在导航按钮的onPress中使用最新状态

无需修改handleSave，直接将保存逻辑内联到headerRight的onPress中，并更新useEffect的依赖：

useEffect(() => {
  navigation.setOptions({
    headerLeft: () => (
      <TouchableOpacity
        onPress={() => navigation.goBack()}
        style={{
          padding: 12,
          margin: -12,
        }}
      >
        <CloseIcon size={24} color="#000" />
      </TouchableOpacity>
    ),
    headerRight: () => (
      <Button 
        title="save" 
        onPress={() => {
          console.log(item); // 直接使用最新的item状态
          // 此处添加你的保存逻辑
        }} 
        color="#000" 
      />
    ),
  });
}, [navigation, item]); // 新增item到依赖，状态更新时重新渲染按钮

额外优化建议 #

为避免输入时的闭包问题，可将handleInputChange改为函数式更新，确保每次都基于最新状态修改：

const handleInputChange = (name: string, value: string) => {
  setItem(prevItem => ({ ...prevItem, [name]: value }));
};

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