React Navigation：父组件状态更新时如何更新子组件状态？

这种情况我碰到过好多次——当你用this.props.navigation.navigate("foo", {data: data})给子组件传初始数据后，父组件的状态更新了，子组件却还停留在旧数据上，对吧？这是因为React Navigation的路由参数默认是一次性传递的初始值，不会自动同步父组件的状态变化。下面给你几种实用的解决方案，根据你的场景选就行：

方法1：用navigation.setParams更新路由参数 #

这是最直接的方法，适合简单的父子组件数据同步场景。

父组件操作 #

当父组件的状态更新时，调用setParams方法更新对应路由的参数：

// 父组件（类组件）
class ParentScreen extends React.Component {
  state = {
    data: "初始数据"
  };

  updateData = () => {
    const newData = "更新后的数据";
    this.setState({ data: newData });
    // 同步更新子组件的路由参数
    this.props.navigation.setParams({ data: newData });
  };

  render() {
    return (
      <View>
        <Button title="更新数据" onPress={this.updateData} />
        <Button
          title="跳转到子组件"
          onPress={() =>
            this.props.navigation.navigate("foo", { data: this.state.data })
          }
        />
      </View>
    );
  }
}

子组件接收更新 #

子组件需要监听路由参数的变化，然后更新自己的状态。如果是类组件，用componentDidUpdate；如果是函数组件，用useEffect：

类组件子组件

class ChildScreen extends React.Component {
  state = {
    localData: this.props.route.params.data
  };

  componentDidUpdate(prevProps) {
    // 监听路由参数变化，更新本地状态
    if (prevProps.route.params.data !== this.props.route.params.data) {
      this.setState({ localData: this.props.route.params.data });
    }
  }

  render() {
    return <Text>{this.state.localData}</Text>;
  }
}

函数组件子组件

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

function ChildScreen({ route }) {
  const [localData, setLocalData] = useState(route.params.data);

  useEffect(() => {
    // 当route.params.data变化时更新本地状态
    setLocalData(route.params.data);
  }, [route.params.data]);

  return <Text>{localData}</Text>;
}

方法2：用全局状态管理（Context API/Redux） #

如果你的应用比较复杂，多个组件需要共享这个状态，全局状态管理会更优雅。这里用Context API举个例子：

1. 创建Context #

// DataContext.js
import React, { createContext, useState, useContext } from 'react';

const DataContext = createContext();

export function DataProvider({ children }) {
  const [data, setData] = useState("初始数据");

  return (
    <DataContext.Provider value={{ data, setData }}>
      {children}
    </DataContext.Provider>
  );
}

export function useData() {
  return useContext(DataContext);
}

2. 父组件更新全局状态 #

// 父组件
import { useData } from './DataContext';

function ParentScreen({ navigation }) {
  const { data, setData } = useData();

  const updateData = () => {
    setData("更新后的数据");
  };

  return (
    <View>
      <Button title="更新数据" onPress={updateData} />
      <Button
        title="跳转到子组件"
        onPress={() => navigation.navigate("foo")}
      />
    </View>
  );
}

3. 子组件直接获取全局状态 #

// 子组件
import { useData } from './DataContext';

function ChildScreen() {
  const { data } = useData();
  // 这里的data会自动跟随全局状态更新，不需要额外处理
  return <Text>{data}</Text>;
}

这种方法的好处是不需要依赖React Navigation的路由参数，状态变化时所有订阅的组件都会自动更新，适合复杂场景。

方法3：传递回调函数 #

如果子组件需要主动触发数据更新，或者父组件需要直接通知子组件，可以传递一个回调函数：

父组件传递回调 #

// 父组件
class ParentScreen extends React.Component {
  state = {
    data: "初始数据"
  };

  updateData = () => {
    this.setState({ data: "更新后的数据" });
  };

  getLatestData = () => {
    return this.state.data;
  };

  render() {
    return (
      <View>
        <Button title="更新数据" onPress={this.updateData} />
        <Button
          title="跳转到子组件"
          onPress={() =>
            this.props.navigation.navigate("foo", {
              data: this.state.data,
              getLatestData: this.getLatestData
            })
          }
        />
      </View>
    );
  }
}

子组件调用回调获取最新数据 #

// 子组件
class ChildScreen extends React.Component {
  state = {
    localData: this.props.route.params.data
  };

  refreshData = () => {
    const latestData = this.props.route.params.getLatestData();
    this.setState({ localData: latestData });
  };

  render() {
    return (
      <View>
        <Text>{this.state.localData}</Text>
        <Button title="刷新数据" onPress={this.refreshData} />
      </View>
    );
  }
}

这种方法适合子组件需要手动触发更新的场景，比如下拉刷新时获取最新数据。

总结一下：

• 简单的父子同步：用navigation.setParams + 监听路由参数变化
• 复杂全局状态：用Context API或Redux
• 子组件主动更新：传递回调函数

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