React Native传递setState作为props刷新页面问题求助

核心问题点 #

1. 导航逻辑位置错误：Profile组件顶层直接执行navigation.navigate，导致组件一渲染就自动跳转，完全不符合交互逻辑。
2. 参数接收方式错误：Edit组件试图直接从props解构setName，但React Navigation的页面参数需要通过useRoute()钩子的route.params获取。
3. 拼写错误：Edit组件中navigatiom应为navigation，导致导航失效。
4. 状态更新可靠性不足：即使正确传递setName，部分场景下（如页面被缓存）可能需要主动监听页面聚焦来确保状态刷新。

修正方案一：直接传递状态更新函数 #

Profile.js

import { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { useNavigate } from '@react-navigation/native';

const Profile = () => {
  const [name, setName] = useState('');
  const navigation = useNavigate();

  return (
    <View>
      <Text>{name}</Text>
      {/* 将导航逻辑放在按钮点击事件中 */}
      <Button 
        title="编辑资料"
        onPress={() => navigation.navigate("Edit", { updateName: setName })}
      />
    </View>
  );
};

export default Profile;

Edit.js

import { View, Button } from 'react-native';
import { useNavigate, useRoute } from '@react-navigation/native';

const Edit = () => {
  const navigation = useNavigate();
  const route = useRoute();
  // 从route.params获取传递的状态更新函数
  const { updateName } = route.params;

  const handleSave = () => {
    const newName = "John";
    updateName(newName);
    navigation.navigate("Profile");
  };

  return (
    <View>
      <Button 
        title="保存并返回"
        onPress={handleSave}
      />
    </View>
  );
};

export default Edit;

修正方案二：返回时传递更新值+监听页面聚焦（更可靠） #

如果页面存在缓存场景，推荐这种方式确保状态刷新：

Profile.js

import { useState, useCallback } from 'react';
import { View, Text, Button } from 'react-native';
import { useNavigate, useFocusEffect } from '@react-navigation/native';

const Profile = () => {
  const [name, setName] = useState('');
  const navigation = useNavigate();

  // 监听页面聚焦，获取返回的更新值
  useFocusEffect(
    useCallback(() => {
      const unsubscribe = navigation.addListener('state', (e) => {
        const currentRouteParams = e.data.state.routes[e.data.state.index].params;
        if (currentRouteParams?.newName) {
          setName(currentRouteParams.newName);
          // 清除参数避免重复触发
          navigation.setParams({ newName: undefined });
        }
      });

      return unsubscribe;
    }, [navigation])
  );

  return (
    <View>
      <Text>{name}</Text>
      <Button 
        title="编辑资料"
        onPress={() => navigation.navigate("Edit")}
      />
    </View>
  );
};

export default Profile;

Edit.js

import { View, Button } from 'react-native';
import { useNavigate } from '@react-navigation/native';

const Edit = () => {
  const navigation = useNavigate();

  const handleSave = () => {
    const newName = "John";
    // 返回时传递更新后的名字
    navigation.navigate("Profile", { newName });
  };

  return (
    <View>
      <Button 
        title="保存并返回"
        onPress={handleSave}
      />
    </View>
  );
};

export default Edit;

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