React Native中useState状态异常：saveService获取旧值问题

问题场景 #

• 初始化状态：const [serviceDetails, setServiceDetails] = useState(route.params);
• 组件主函数内打印serviceDetails能看到状态正常更新
• 点击header的Save按钮触发saveService异步函数时，函数内的serviceDetails始终是初始旧值，导致提交服务器的数据错误

测试用初始参数：

{"_id": "66c4cc65fbcbee518050617e", "concerns": ["Discoloration", "Loose Skin", "Wellness", "Wrinkles"], "details": "This is details", "image": "", "name": "IPL Laser", "tags": [""], "treatment_plans": []}

问题原因 #

这是典型的闭包陷阱：
组件首次渲染时，saveService函数被创建并捕获了当时的serviceDetails初始值。后续状态更新触发组件重新渲染时，会生成新的saveService函数，但如果header按钮没有重新绑定这个新函数（比如navigation.setOptions只在首次渲染执行），点击时调用的依然是旧的saveService，它引用的还是初始状态值。

解决方案 #

方案1：使用useRef实时同步最新状态 #

通过useRef保存最新的状态值，避免闭包引用旧值：

import { useState, useRef, useEffect } from 'react';
import { Button } from 'react-native';

const EditService = ({ route, navigation }) => {
  const [serviceDetails, setServiceDetails] = useState(route.params);
  // 用ref保存最新状态
  const serviceDetailsRef = useRef(serviceDetails);

  // 状态更新时同步ref
  useEffect(() => {
    serviceDetailsRef.current = serviceDetails;
  }, [serviceDetails]);

  const saveService = async () => {
    // 从ref获取最新值
    const latestDetails = serviceDetailsRef.current;
    console.log(latestDetails);
    
    // 提交服务器逻辑
    try {
      // await api.updateService(latestDetails._id, latestDetails);
      navigation.goBack();
    } catch (err) {
      console.error(err);
    }
  };

  // 动态设置header按钮，确保绑定最新的saveService
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button title="Save" onPress={saveService} />
      ),
    });
  }, [navigation, saveService]);

  // 示例修改状态的函数
  const updateConcerns = (newConcerns) => {
    setServiceDetails(prev => ({ ...prev, concerns: newConcerns }));
  };

  return (
    // 你的组件渲染内容
  );
};

方案2：用useCallback包裹saveService并更新header绑定 #

通过useCallback让saveService在状态变化时重新创建，并同步更新header按钮的绑定：

import { useState, useCallback, useEffect } from 'react';
import { Button } from 'react-native';

const EditService = ({ route, navigation }) => {
  const [serviceDetails, setServiceDetails] = useState(route.params);

  // 用useCallback包裹，依赖serviceDetails确保状态更新时函数重新生成
  const saveService = useCallback(async () => {
    console.log(serviceDetails);
    
    // 提交服务器逻辑
    try {
      // await api.updateService(serviceDetails._id, serviceDetails);
      navigation.goBack();
    } catch (err) {
      console.error(err);
    }
  }, [serviceDetails, navigation]);

  // 依赖saveService，确保函数更新时重新设置header按钮
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button title="Save" onPress={saveService} />
      ),
    });
  }, [navigation, saveService]);

  // 示例修改状态的函数
  const updateConcerns = (newConcerns) => {
    setServiceDetails(prev => ({ ...prev, concerns: newConcerns }));
  };

  return (
    // 你的组件渲染内容
  );
};

注意事项 #

• 如果你直接在navigation.setOptions里定义headerRight而不通过useEffect，需要确保saveService的依赖正确，否则依然会引用旧函数。
• 修改状态时建议使用函数式更新（setServiceDetails(prev => ({...prev, ...changes}))），避免因状态依赖导致的更新遗漏。

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