在Stack Navigator配置项中调用Redux Action报错的问题排查

嘿，我来帮你梳理下你遇到的问题：你在尝试把Redux的Action通过Stack Navigator的params传递并调用时，遇到了this不是函数的报错，而且用navigation.params也没解决，对吧？

先排查最基础的问题：组件是否正确连接Redux？ #

首先要确认你的组件已经通过Redux的connect高阶组件正确绑定了Action，不然this.props.doShare根本不会存在，自然会报错。比如你的组件应该是这样的结构：

import React from 'react';
import { connect } from 'react-redux';
// 导入你的Action
import { doShare } from '../path/to/your/actions';

class YourScreenComponent extends React.Component {
  // 你的组件逻辑...
}

// 把Action映射到组件props
const mapDispatchToProps = {
  doShare
};

// 用connect包裹组件
export default connect(null, mapDispatchToProps)(YourScreenComponent);

如果没有这一步，this.props.doShare就是undefined，调用的时候肯定会报错。

核心问题：函数传递时的上下文（this）丢失 #

当你直接把this.props.doShare赋值给navigation.params时，这个函数的this绑定会丢失——Redux的mapDispatchToProps虽然会帮你绑定dispatch，但当你把函数作为参数传递到navigation的params里时，它的执行上下文会发生变化，导致调用时this不是预期的对象，从而报错。

解决办法有两种，选一种适合你的就行：

1. 用组件内的箭头函数包裹Action调用
   你已经写了sharePost这个箭头函数（箭头函数会自动捕获组件的this上下文），那直接把这个函数传给params就好：

componentDidMount() {
  this.props.navigation.setParams({ 
    referencedSharePost: this.sharePost
    // 不用传referencedDoShare，直接用已经绑定好上下文的sharePost
  });
}

// 箭头函数自动绑定组件的this，所以调用this.props.doShare时不会出错
sharePost = () => {
  this.props.doShare();
  console.log("DONE");
};

之后在需要触发的地方，调用navigation.getParam('referencedSharePost')()就可以正常执行了。

2. 用箭头函数包裹Action再传给params
   如果你想直接传递doShare，可以用箭头函数把它包起来，确保执行时的this指向正确：

componentDidMount() {
  this.props.navigation.setParams({ 
    referencedDoShare: () => this.props.doShare()
    // 箭头函数捕获当前组件的this，调用时不会丢失上下文
  });
}

这样在调用navigation.getParam('referencedDoShare')()时，就能正确触发Redux的Action了。

为什么之前用navigation.params无效？ #

因为你传递的this.props.doShare已经丢失了正确的this绑定，就算拿到了这个函数引用，执行时的上下文不对，还是会报错。上面两种方法都是通过箭头函数固定了this的指向，就能解决问题啦。

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