使用Expo Router将数据从Page2回传至前一页的正确方法

下面提供几种实用方法，解决Page2提交后关闭并回传数据到Page1的需求：

方案一：React Context全局状态管理 #

适合需要在多个页面共享状态的场景，实现步骤如下：

1. 创建共享状态Context #

新建FormDataContext.js文件：

import { createContext, useContext, useState } from 'react';

const FormDataContext = createContext();

export function FormDataProvider({ children }) {
  const [returnedData, setReturnedData] = useState(null);

  return (
    <FormDataContext.Provider value={{ returnedData, setReturnedData }}>
      {children}
    </FormDataContext.Provider>
  );
}

export function useFormData() {
  return useContext(FormDataContext);
}

2. 在根组件中包裹Provider #

修改app/_layout.js（或你的根路由组件）：

import { FormDataProvider } from '../contexts/FormDataContext';
import { Slot } from 'expo-router';

export default function RootLayout() {
  return (
    <FormDataProvider>
      <Slot />
    </FormDataProvider>
  );
}

3. Page1中监听回传数据 #

import { Link } from 'expo-router';
import { TouchableOpacity, Text, useEffect, useState } from 'react';
import { useFormData } from '../contexts/FormDataContext';

export default function Page1() {
  const { returnedData, setReturnedData } = useFormData();
  const [receivedData, setReceivedData] = useState(null);

  useEffect(() => {
    if (returnedData) {
      setReceivedData(returnedData);
      // 清空Context数据，避免重复触发
      setReturnedData(null);
    }
  }, [returnedData, setReturnedData]);

  return (
    <>
      <Link href="/page2" asChild>
        <TouchableOpacity>
          <Text>Go to Page 2</Text>
        </TouchableOpacity>
      </Link>
      {receivedData && (
        <Text>从Page2收到的数据：{JSON.stringify(receivedData)}</Text>
      )}
    </>
  );
}

4. Page2提交后更新状态并返回 #

import { router } from 'expo-router';
import { useFormData } from '../contexts/FormDataContext';
// 导入你的postRequest和表单相关组件

export default function Page2() {
  const { setReturnedData } = useFormData();
  // 假设你已经有name和amount的状态

  const submit = async () => {
    try {
      const response = await postRequest('form/insert', { name, amount });
      const json = response.data;

      // 将回传数据存入Context
      setReturnedData(json);
      // 返回Page1
      router.back();
    } catch(error) {
      console.log(error);
    }
  };

  // 表单渲染和提交按钮绑定submit函数
  return (
    // ...你的表单代码
    <TouchableOpacity onPress={submit}>
      <Text>提交</Text>
    </TouchableOpacity>
  );
}

方案二：AsyncStorage临时存储 #

适合简单的临时数据传递，不需要全局状态的场景：

1. Page2提交后存储数据 #

import { router } from 'expo-router';
import AsyncStorage from '@react-native-async-storage/async-storage';
// 导入你的postRequest和表单相关组件

export default function Page2() {
  // 假设你已经有name和amount的状态

  const submit = async () => {
    try {
      const response = await postRequest('form/insert', { name, amount });
      const json = response.data;

      // 将数据存入临时存储
      await AsyncStorage.setItem('page2ReturnData', JSON.stringify(json));
      // 返回Page1
      router.back();
    } catch(error) {
      console.log(error);
    }
  };

  // ...表单代码
}

2. Page1中读取并清理存储 #

import { Link, usePathname } from 'expo-router';
import { TouchableOpacity, Text, useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function Page1() {
  const pathname = usePathname();
  const [receivedData, setReceivedData] = useState(null);

  useEffect(() => {
    const fetchReturnData = async () => {
      const data = await AsyncStorage.getItem('page2ReturnData');
      if (data) {
        setReceivedData(JSON.parse(data));
        // 读取后清空存储，避免重复读取
        await AsyncStorage.removeItem('page2ReturnData');
      }
    };

    // 当回到Page1页面时触发读取
    if (pathname === '/page1') {
      fetchReturnData();
    }
  }, [pathname]);

  return (
    <>
      <Link href="/page2" asChild>
        <TouchableOpacity>
          <Text>Go to Page 2</Text>
        </TouchableOpacity>
      </Link>
      {receivedData && (
        <Text>从Page2收到的数据：{JSON.stringify(receivedData)}</Text>
      )}
    </>
  );
}

方案三：路由参数传递（不推荐，会暴露URL） #

如果数据不敏感且可以接受路由历史新增记录，可以用这种方法：

1. Page2提交后跳回Page1并带参数 #

import { router } from 'expo-router';
// 导入你的postRequest和表单相关组件

export default function Page2() {
  // 假设你已经有name和amount的状态

  const submit = async () => {
    try {
      const response = await postRequest('form/insert', { name, amount });
      const json = response.data;

      // 跳回Page1并携带数据（转成字符串避免路由解析问题）
      router.push({ 
        pathname: '/page1', 
        params: { returnData: JSON.stringify(json) } 
      });
    } catch(error) {
      console.log(error);
    }
  };

  // ...表单代码
}

2. Page1中读取参数并清理路由 #

import { Link, useLocalSearchParams, router } from 'expo-router';
import { TouchableOpacity, Text, useEffect, useState } from 'react';

export default function Page1() {
  const params = useLocalSearchParams();
  const [receivedData, setReceivedData] = useState(null);

  useEffect(() => {
    if (params.returnData) {
      setReceivedData(JSON.parse(params.returnData));
      // 替换当前路由，去掉带参数的历史记录
      router.replace('/page1');
    }
  }, [params]);

  return (
    <>
      <Link href="/page2" asChild>
        <TouchableOpacity>
          <Text>Go to Page 2</Text>
        </TouchableOpacity>
      </Link>
      {receivedData && (
        <Text>从Page2收到的数据：{JSON.stringify(receivedData)}</Text>
      )}
    </>
  );
}

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