Redux中useSelector正常但connect的mapStateToProps返回number为undefined

问题根因 #

你调用connect时传入的mapStateToProps、mapDispatchToProps属于未定义状态。
你使用const声明这两个函数，而const不存在变量提升，两个函数的定义写在了export default connect(...)语句之后，代码执行到connect时，这两个参数还没有完成初始化，传入的是undefined，自然无法完成状态到组件props的映射，所以组件拿到的number是undefined。

解决方法 #

调整代码顺序，把mapStateToProps、mapDispatchToProps的定义放到export default语句之前即可，修改后的组件代码参考如下：

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { connect } from 'react-redux'
import { incrementNumber } from '../actions/exampleAction'

const Incrementor = ({ number, increment }) => {
  return (
    <View>
      <Text onPress={increment}>{number}</Text>
    </View>
  )
}

const styles = StyleSheet.create({})

// 两个映射函数的定义移到export语句前
const mapStateToProps = (state) => {
  return {
    number: state.exampleReducer.number,
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch(incrementNumber()),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Incrementor)

你也可以直接把映射逻辑写在connect参数里，不用单独声明变量，也能避免顺序问题：

export default connect(
  state => ({ number: state.exampleReducer.number }),
  dispatch => ({ increment: () => dispatch(incrementNumber()) })
)(Incrementor)

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