如何向React Navigation函数传递更新后的状态？

嘿，我来帮你搞定这个问题！你现在遇到的情况是：父组件在componentDidMount里传给子组件的code参数是当时state的快照（也就是初始值"aaa"），就算之后调用refresh更新了state，子组件拿到的参数不会自动同步——因为React Navigation的初始参数是一次性传递的，不会跟着父组件的state变化自动更新。

下面给你几种靠谱的解决方法，按需选择：

方法一：用React Context共享状态（最推荐） #

这种方式能让父组件的state更新后，所有依赖这个状态的子组件（不管导航层级多深）都能自动拿到最新值，完全摆脱导航参数的限制。

第一步：创建Context文件 #

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

// 创建Context
const CodeContext = createContext();

// 封装Provider组件，用来提供状态和更新方法
export const CodeProvider = ({ children, initialCode, refresh }) => {
  return (
    <CodeContext.Provider value={{ code: initialCode, refresh }}>
      {children}
    </CodeContext.Provider>
  );
};

// 封装自定义Hook，方便函数组件获取Context
export const useCode = () => useContext(CodeContext);

第二步：修改父组件，用Provider包裹 #

把父组件的状态和refresh方法通过Provider传递下去，导航的时候不用再传参数了：

import { CodeProvider } from './CodeContext';

class Parent extends React.Component {
  constructor(props){
    super(props)
    this.state = { code: "aaa" }
    this.refresh = this.refresh.bind(this)
  }

  refresh() {
    this.setState({ code: "bbb" })
  }

  async componentDidMount(){
    const {navigate} = this.props.navigation
    // 导航时不用传code和refresh了
    navigate("Child", {screen: "Screen Two"})
  }

  render() {
    return (
      <CodeProvider initialCode={this.state.code} refresh={this.refresh}>
        {/* 父组件的其他内容 */}
      </CodeProvider>
    )
  }
}

第三步：子组件获取最新状态和方法 #

不管子组件是类组件还是函数组件，都能轻松拿到最新值：

函数组件写法

import { useCode } from './CodeContext';

const ScreenTwo = ({ navigation }) => {
  const { code, refresh } = useCode();

  return (
    <div>
      <p>当前code值：{code}</p>
      <button onClick={refresh}>点击更新code</button>
    </div>
  );
};

类组件写法

import { CodeContext } from './CodeContext';

class ScreenTwo extends React.Component {
  // 指定Context类型
  static contextType = CodeContext;

  render() {
    const { code, refresh } = this.context;
    return (
      <div>
        <p>当前code值：{code}</p>
        <button onClick={refresh}>点击更新code</button>
      </div>
    );
  }
}

方法二：用Navigation的setParams动态更新参数 #

如果不想用Context，也可以通过React Navigation的API手动更新子组件的参数，不过这种方式依赖导航结构，灵活性稍差。

修改父组件的refresh方法 #

在state更新完成后，主动更新子组件的导航参数：

refresh() {
  this.setState({ code: "bbb" }, () => {
    // 获取子组件的导航实例
    const childNavigation = this.props.navigation.getChildNavigation("Child");
    if (childNavigation) {
      // 更新子组件的参数
      childNavigation.setParams({ code: this.state.code });
    }
  });
}

子组件监听参数变化 #

在子组件里监听参数的变化，拿到最新值：

类组件写法

componentDidUpdate(prevProps) {
  // 对比前后参数，变化时处理
  if (prevProps.route.params?.code !== this.props.route.params?.code) {
    const newCode = this.props.route.params.code;
    console.log("更新后的code：", newCode);
    // 这里可以做你需要的操作
  }
}

函数组件写法

import { useEffect } from 'react';

const ScreenTwo = ({ route }) => {
  useEffect(() => {
    const currentCode = route.params?.code;
    console.log("更新后的code：", currentCode);
    // 这里做你需要的操作
  }, [route.params?.code]); // 监听code参数变化

  // 其他渲染逻辑
};

总结 #

• 如果你需要在多个组件间共享状态，强烈推荐用React Context，它的扩展性和维护性更好。
• 如果只是简单的父子导航传值，也可以用setParams的方式，但要注意导航结构的正确性。

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