React-Native调用navigation.setParams报错原因咨询

为啥会报错？ #

你碰到的这个错误，核心原因就是你调用this.props.navigation.setParams({});时传了个空对象{}。在你当前的运行环境（可能是React Navigation旧版本的实现，或者JS引擎的性能优化逻辑）里，内部用Object.assign来合并导航参数，但这个优化逻辑要求assign的源参数不能是空对象——虽然这不符合JS规范，但确实是为了性能做出的特殊处理。

空对象没有任何可合并的属性，所以触发了这个报错。

怎么修复？ #

根据你的需求（应该是想触发导航栏配置的更新吧？），给你两个简单的解决办法：

1. 传个占位的参数凑数 #

如果你只是想触发navigationOptions重新计算，不需要实际设置有用的参数，那传个随便的键值对就行，比如：

this.props.navigation.setParams({ isLoaded: true });

这样既满足了内部Object.assign的要求，又能达到你触发更新的目的。

2. 传实际需要的参数（更推荐） #

看你的代码，你应该是在获取到训练详情后，想更新导航栏标题之类的？那不如直接把需要的参数传进去。比如等currentWorkout加载完成后，把它的标题设置到导航参数里：

首先，在组件里加个componentDidUpdate来监听数据变化：

componentDidUpdate(prevProps) {
  // 当currentWorkout加载完成且和之前的不一样时
  if (prevProps.currentWorkout !== this.props.currentWorkout && this.props.currentWorkout.title) {
    this.props.navigation.setParams({ workoutTitle: this.props.currentWorkout.title });
  }
}

然后修改你的navigationOptions来使用这个参数：

static navigationOptions = ({ navigation }) => {
  const { params = {} } = navigation.state;
  return {
    headerTitle: params.workoutTitle || "TITLE", // 优先用传过来的标题，没有就显示默认的TITLE
    headerTitleStyle: { width: "100%", alignItems: "center" },
    headerStyle: { paddingRight: 10, paddingLeft: 10 }
  };
};

这样既解决了报错，又实现了动态更新导航栏标题的实际需求，一举两得～

小提示 #

其实如果只是初始化参数，你完全可以在跳转到这个页面的时候就把初始参数传进去，比如：

// 在跳转的地方
navigation.navigate('WorkoutDetail', { workoutId: xxx });

就不用在componentDidMount里折腾空对象啦。

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