React Native组件添加connect报错，无法调用dispatch问题求助

我来帮你拆解这个问题——这种只在添加connect后才出现的报错，基本都是connect的使用姿势不符合react-redux的要求，或者组件本身的细节和connect的逻辑冲突了。结合你给出的代码片段，我整理了几个最可能的原因：

1. connect的参数传递不符合要求 #

react-redux的connect函数需要接收1-2个核心参数（mapStateToProps和mapDispatchToProps），如果你直接写了connect()(ItemsInCartContent)，某些版本的react-redux会因为第一个参数为undefined而抛出错误。

解决办法：如果不需要映射Redux状态到组件props，就显式传递null作为第一个参数，比如：

// 不需要映射state，只注入dispatch
connect(null)(ItemsInCartContent)
// 或者需要映射dispatch的话
connect(null, mapDispatchToProps)(ItemsInCartContent)

2. 组件构造函数未正确传递props #

如果你的组件有构造函数，却没在super()里传入props，那在构造函数内部访问this.props会得到undefined。当你没加connect时，this.props里没有dispatch，可能你没在构造函数里用到它，所以没报错；但加了connect后，dispatch被注入到props中，此时在构造函数里访问this.props.dispatch就会触发错误。

错误示例：

constructor() {
  super(); // 没传props！
  this.handleClick = () => this.props.dispatch(...) // 这里会报错
}

修正后：

constructor(props) {
  super(props);
  this.handleClick = () => this.props.dispatch(...)
}

3. connect的导入错误 #

你可能不小心导入了错误的connect函数——比如从redux库而非react-redux导入。其他组件导入正确所以正常，但这个组件导错了就会触发报错。

检查导入语句：

// 正确的导入
import { connect } from 'react-redux';
// 错误的导入（会导致报错）
import { connect } from 'redux';

4. 组件导出的语法错误 #

你给出的代码是export default class ItemsInCartContent extends Component {...，添加connect时如果写错了导出语法，比如把connect直接嵌套在export default后面紧跟class，会导致语法错误，移除connect后语法恢复正常，报错就消失了。

错误示例：

// 语法错误
export default connect(null)(class ItemsInCartContent extends Component {...})

正确写法：

// 先定义组件
class ItemsInCartContent extends Component {
  // 组件逻辑
}
// 再用connect包裹后导出
export default connect(null)(ItemsInCartContent);

5. 组件内部props重名冲突（少见但可能） #

如果你的组件原本接收一个名为dispatch的props，当connect注入内置的dispatch时，会覆盖原来的props，导致组件逻辑出现异常报错。这种情况可以通过修改mapDispatchToProps的配置，给注入的dispatch换个名字来避免：

const mapDispatchToProps = (dispatch) => ({
  customDispatch: dispatch
})
export default connect(null, mapDispatchToProps)(ItemsInCartContent);
// 组件内用this.props.customDispatch调用

快速排查步骤 #

1. 先尝试用最简单的connect(null)(ItemsInCartContent)包裹组件，看是否还报错；
2. 检查构造函数是否正确传递了props；
3. 确认connect的导入来源是react-redux；
4. 核对组件导出的语法是否正确。

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