从 react 导航中获取 mapStateToProps 路线参数。

Question

我使用的是react native和redux。我想创建一个带有导航参数的按钮，如

<Button
    title="Manage Course"
    onPress={() => {
      navigation.navigate('Manage Course', { itemId: 86});
    }}
  />

其他屏幕页面。

function ManageCoursePage({....}){
  useEffect(() => { 
    .....
  })
}
.....
function mapStateToProps(state, ownProps) { 
 // get ownProps itemId param from navigation? 
}

export default connect(mapStateToProps, mapDispatchToProps)(ManageCoursePage)

那么如何在mapStateToProps函数中发送导航参数到ownProps？

能否请你帮忙解决这个问题？

Answer 1

你可以使用以下方法访问navigate函数传递的参数 ownProps.route.params

function mapStateToProps(state, ownProps) { 
 const {itemId} = ownProps.route.params;
 ...
}

更新：根据你的点心

你必须注意到，你并没有在导航的过程中直接渲染ManageCoursePage，而是在中间有一个中间堆栈，它接收路径参数，但并不将其转发给ManageCoursePage，因此你在mapStateToPRops中看不到它。

你可以像转发

const CourseMangeStack = createStackNavigator()
function ManageCoureStackScreen({route}) {
  // console.log(route);
  return (
    <CourseMangeStack.Navigator>
      <CourseMangeStack.Screen
        name="Manage Course"

      >{
        props => <ManageCoursePage {...props} params={route.params}/>
      }</CourseMangeStack.Screen>
    </CourseMangeStack.Navigator>
  )
}

检查演示小吃