React Native类组件中通过Redux获取selectOrigin设置initialRegion的问题

我想把selectOrigin.location.lat和selectOrigin.location.longitude传入MapView的initialRegion参数，但一直没成功。之前在函数组件里用useSelector(selectOrigin)能正常拿到origin，但现在Map是类组件，用connect方式时遇到了问题。已经修复了之前的错误，现在需要解决这个connect的使用问题。

原代码： #

import { StyleSheet, Text, View,Image } from 'react-native'
import React from 'react'
import tw from "tailwind-react-native-classnames";

import MapView,{Marker,Polygon} from 'react-native-maps';
import { useSelector,connect } from 'react-redux';

import { selectOrigin } from '../slices/navSlice';

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      reports: [],
      latitude: 0,
      longitude: 0,
      error: null,
    }
  }
  
  componentDidMount() {
    fetch('https://gist.githubusercontent.com/jo780-full/c42f65154fac8d3d6e495326211e15b7/raw/20e8af7285f9ae5c1328e00cc79b1e2711bd446a/student.json',{
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    })
    .then(res => res.json())
    .then(data => {
      this.setState({ reports: data.report })
    })
    .catch(console.error)
  }
  
  mapMarkers = () => {
    return this.state.reports.map((report) => <Marker
      key={report.id}
      coordinate={{ latitude: report.latitude, longitude: report.longitude }}
      title=" student parking spot"
      description="available"
    ></Marker >)
  }
  
  mapStateToProps = (state) => {
    return {
      origin: selectOrigin
    }
  }
  
  render() {
    return (
      <MapView
        mapType="mutedStandard"
        showsUserLocation={true}
        followUserLocation={true}
        zoomEnabled={true}
        style={tw`h-full w-full`}
        initialRegion={
          {
            latitude: this.mapStateToProps.origin.location.lat,
            longitude:this.mapStateToProps.origin.location.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }
        }
      >
        {this.mapMarkers()}

        {/*student area*/}
        <Polygon
          coordinates={[
            { latitude: 12.908764862118488,   longitude: 77.56763368009942 },
            { latitude: 12.909351220825277,longitude:  77.56756522139399 },
            { latitude: 12.909496879375817,longitude:  77.56763847998074 },
            {latitude:12.909506790161094,longitude: 77.56779777527214},
            {latitude:12.909333117614427, longitude:77.56856604008081},
            {latitude:12.909124598612156,longitude: 77.56852690728837},
            { latitude: 12.909385294896701,  longitude: 77.5681230870149, },
            {latitude:12.909061025711033, longitude:77.5681799298621},
            {latitude:12.909050854045336,longitude:  77.56815645018665},
            { latitude:12.90868749725228, longitude: 77.56800790948633},
            { latitude: 12.908710622492181 , longitude: 77.56762153367315 },
          ]}
          fillColor="rgba(255, 0, 0, 0.1)"
          strokeColor="rgba(255, 0, 0, 0.5)"
          strokeColors={[
            '#7F0000',
            '#00000000',
            '#B24112',
            '#E5845C',
            '#238C23',
            '#7F0000'
          ]}
          strokeWidth={1}
        />
        
        <Polygon
          coordinates={[
            { latitude: 12.909394643253528,longitude:   77.56614422503371 },
            { latitude: 12.909456079146613, longitude:  77.56582255987011 },
            { latitude:12.90941582804595,longitude: 77.56577909160477},
            {latitude:12.90938405085663, longitude:77.56579213208437},
            { latitude:12.909368162260469, longitude:77.56582255987011},
            {latitude:12.90934168126461,longitude: 77.56586602813547},
            { latitude:12.908920103432747, longitude:77.56579430549765},
            {latitude:12.908892563147631, longitude:77.56606489544944}
          ]}
          fillColor="rgba(0, 255, 0, 0.1)"
          strokeColor="rgba(0, 255, 0, 0.5)"
          strokeColors={[
            '#7F0000',
            '#00000000',
            '#B24112',
            '#E5845C',
            '#238C23',
            '#7F0000'
          ]}
          strokeWidth={1}
        />
        
        {/*Hospital  */}
        <Polygon
          coordinates={[
            { latitude:12.908518776874924,longitude:  77.56518322273905 },
            { latitude: 12.908724009086619,  longitude: 77.56522814973901 },
            { latitude:12.908739042012709,  longitude: 77.56516914114205 },
            { latitude: 12.908535770631334  ,longitude:   77.56512287303762},
          ]}
          fillColor="rgba(0, 0, 255, 0.1)"
          strokeColor="rgba(0, 0, 255, 0.5)"
          strokeColors={[
            '#7F0000',
            '#00000000',
            '#B24112',
            '#E5845C',
            '#238C23',
            '#7F0000'
          ]}
          strokeWidth={2}
        />
        
        {/*Vip Parking */}
        <Polygon
          coordinates={[
            { latitude:12.909451264916404, longitude:  77.5669158882026 },
            { latitude: 12.909262624852568,  longitude:  77.56687637127314 },
            { latitude: 12.90931398237095 ,longitude: 77.56748432403379},
            { latitude:12.909400895070368, longitude:  77.56744784686815 },
            {latitude:12.909426457234511, longitude:77.56698467532628},
          ]}
          fillColor="rgba(255, 255, 50, 0.3)"
          strokeColor="rgba(255, 255, 0, 0.6)"
          strokeColors={[
            '#7F0000',
            '#00000000',
            '#B24112',
            '#E5845C',
            '#238C23',
            '#7F0000'
          ]}
          strokeWidth={2}
        />
      </MapView>
    )
  }
}

export default connect(mapStateToProps)(Map)

const styles = StyleSheet.create({
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
})

解决方案： #

1. 修正mapStateToProps的实现

当前mapStateToProps直接返回了selectOrigin这个selector函数，没有调用它获取state中的实际值。需要传入state并调用selector：

// 把mapStateToProps移到类外部，确保connect能访问到
const mapStateToProps = (state) => {
  return {
    origin: selectOrigin(state) // 调用selector，传入state获取origin数据
  }
}

2. 在render中通过props获取origin

类组件中，connect会把mapStateToProps返回的对象作为props传递给组件，所以要从this.props中取origin，同时添加空值判断避免报错：

initialRegion={this.props.origin?.location ? {
  latitude: this.props.origin.location.lat,
  longitude: this.props.origin.location.longitude,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
} : {
  // 当origin未设置时的默认区域，可根据需求调整
  latitude: 12.908764862118488,
  longitude: 77.56763368009942,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
}}

3. 调整mapStateToProps的位置

将mapStateToProps移到类的外部，或者定义为类的静态方法，确保connect可以正确引用它。

修正后的完整代码： #

import { StyleSheet, Text, View,Image } from 'react-native'
import React from 'react'
import tw from "tailwind-react-native-classnames";

import MapView,{Marker,Polygon} from 'react-native-maps';
import { connect } from 'react-redux';

import { selectOrigin } from '../slices/navSlice';

// 移到类外部的mapStateToProps
const mapStateToProps = (state) => {
  return {
    origin: selectOrigin(state)
  }
}

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      reports: [],
      latitude: 0,
      longitude: 0,
      error: null,
    }
  }
  
  componentDidMount() {
    fetch('https://gist.githubusercontent.com/jo780-full/c42f65154fac8d3d6e495326211e15b7/raw/20e8af7285f9ae5c1328e00cc79b1e2711bd446a/student.json',{
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    })
    .then(res => res.json())
    .then(data => {
      this.setState({ reports: data.report })
    })
    .catch(console.error)
  }
  
  mapMarkers = () => {
    return this.state.reports.map((report) => <Marker
      key={report.id}
      coordinate={{ latitude: report.latitude, longitude: report.longitude }}
      title=" student parking spot"
      description="available"
    ></Marker >)
  }
  
  render() {
    return (
      <MapView
        mapType="mutedStandard"
        showsUserLocation={true}
        followUserLocation={true}
        zoomEnabled={true}
        style={tw`h-full w-full`}
        initialRegion={this.props.origin?.location ? {
          latitude: this.props.origin.location.lat,
          longitude: this.props.origin.location.longitude,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        } : {
          latitude: 12.908764862118488,
          longitude: 77.56763368009942,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        {this.mapMarkers()}

        {/*student area*/}
        <Polygon
          coordinates={[
            { latitude: 12.908764862118488,   longitude: 77.56763368009942 },
            { latitude: 12.909351220825277,longitude:  77.56756522139399 },
            { latitude: 12.909496879375817,longitude:  77.56763847998074 },
            {latitude:12.909506790161094,longitude: 77.56779777527214},
            {latitude:12.909333117614427, longitude:77.56856604008081},
            {latitude:12.909124598612156,longitude: 77.56852690728837},
            { latitude: 12.909385294896701,  longitude: 77.5681230870149, },
            {latitude:12.909061025711033, longitude:77.5681799298621},
            {latitude:12.909050854045336,longitude:  77.56815645018665},
            { latitude:12.90868749725228, longitude: 77.56800790948633},
            { latitude: 12.908710622492181 , longitude: 77.56762153367315 },
          ]}
          fillColor="rgba(255, 0,