React Native - получение состояния `location` в моем React Redux Store

Я пытаюсь получить состояние location (долгота и широта) в моем хранилище React Redux, чтобы создать несколько маркеров MapView, но он возвращает эту ошибку:

введите описание изображения здесь

Вот мои коды:

EventMap.js - здесь я хочу использовать состояние Redux и создать несколько маркеров MapView. Я попытался применить состояние Redux в координате MapView.Marker.

this.state = {
  focusedLocation: {
    latitude: 0,
    longitude: 0,
    // latitudeDelta: 0.04864195044303443,
    // longitudeDelta: 0.040142817690068,
    latitudeDelta: 0.01,
    longitudeDelta: Dimensions.get('window').width / Dimensions.get('window').height * 0.01
  },
  },
  markers: [
    {
      coordinate: {
        latitude: 37.42484589323653,
        longitude: -122.08271104842426
      },
    },
    {
      coordinate: {
        latitude: 37.42019338901534,
        longitude: -122.08207536488771
      },

    },
    {
      coordinate: {
        latitude: 37.4219108525511,
        longitude: -122.08126466721296
      },
    },
    {
      coordinate: {
        latitude: 37.42190153308783,
        longitude: -122.08728086203337
      },
    },
    {
      coordinate: {
        latitude: 37.419681603891306,
        longitude: -122.08521489053966
      },
    }
  ],
}

<MapView
      style={styles.container}
      initialRegion={this.state.focusedLocation}
      onPress={this.pickLocationHandler}
      showsUserLocation={true}
      ref={ref => this.map = ref} //For animating map movement
    >
      {userMarker}
      {this.props.events.map((marker, index) => {
        if(marker.location) {
          const scaleStyle = {
            transform: [
              {
                scale: interpolations[index].scale,
              },
            ],
          };
          const opacityStyle = {
            opacity: interpolations[index].opacity,
          };
          return (
            <MapView.Marker key={index} coordinate={marker.location}>
              <Animated.View style={[styles.markerWrap, opacityStyle]}>
                <Animated.View style={[styles.ring, scaleStyle]} />
                  <View style={styles.marker} />
              </Animated.View>
            </MapView.Marker>
          );
        } else {
          return null;
        }
      })}
    </MapView>

---------------
const mapStateToProps = state => {
return {
  events: state.events.events
};
};

export default connect(mapStateToProps)(EventMap);

EventCreator.js:

placeAddedHandler = () => {
this.props.onAddEvent(
  this.state.controls.eventName.value,
  this.state.controls.eventDescription.value,
  this.state.controls.location.value
);
};

render() {
return(
  <LinearGradient style={styles.linearGradient} colors={['#718792', '#1c313a', '#000a12']}>
    <View style={{flex:1}}>
      <SetLocationMap 
        mapContainer={styles.mapContainer}
        onLocationPick={this.locationPickedHandler}
        showUserLocation={true}
      />
    </View>
    <View style={styles.buttonContainer}>
      <TouchableOpacity onPress={this.placeAddedHandler}>
        <View style={styles.button}>
          <Text style={{color: 'black', fontSize: 20, fontWeight: 'bold'}}>Add</Text>
        </View>
      </TouchableOpacity>
    </View>
  </LinearGradient>
);
} 
}

SetLocationMap.js:

  pickLocationHandler = (event) => {
const coords = event.nativeEvent.coordinate;
//For animation of map
this.map.animateToRegion({
  ...this.state.focusedLocation,
  latitude: coords.latitude,
  longitude: coords.longitude
});
this.setState(prevState => {
  return {
    focusedLocation: {
      ...prevState.focusedLocation,
      latitude: coords.latitude,
      longitude: coords.longitude
    },
    locationChosen: true
  };
});
this.props.onLocationPick({
  latitude: coords.latitude,
  longitude: coords.longitude
});
};

  render() {
let marker = null;
if(this.state.locationChosen) {
  marker = <MapView.Marker coordinate={this.state.focusedLocation} flat={true}/>
}
return(
  <View style={this.props.mapContainer}>
    {/* <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
      <Icon name="md-locate" size={30} color="blue"/>
    </TouchableOpacity> */}
    <MapView
      {...this.props}
      style={styles.map}
      initialRegion={this.state.focusedLocation}
      onPress={this.pickLocationHandler}
      ref={ref => this.map = ref} //For animating map movement
    >
      {marker}
    </MapView>
  </View>
);
}
}

Вот мои коды для React Redux:

../store/reducers/events.js - this is where I put my React Redux State

const reducer = (state = initialState, action) => {
switch (action.type) {
  case ADD_EVENT:
    return {
       ...state,
      events: state.events.concat({
        key:  `${Math.random()}`,
        name: action.eventName,
        description: action.eventDescription,
        location: action.location,
        image: {
          uri: "https://c1.staticflickr.com/5/4096/4744241983_34023bf303_b.jpg"
        }
      })
    };

Если чего-то не хватает, спросите мои коды. Спасибо!


person Liza Catherine Ombyaw    schedule 11.06.2019    source источник


Ответы (1)


Возможно, проблема в вашем коде такова:

<MapView.Marker key={index} coordinate={this.props.events}> 

Где this.props.events - это что-то (в зависимости от вашего штата), отличное от типа местоположения.

Попытка решения состоит в том, чтобы попытаться предоставить тип местоположения, например:

<MapView.Marker key={index} coordinate={{latitude: latitude, longitude: longitude}}> 

где широта и долгота - число с плавающей запятой.

Пример :

<MapView.Marker key={index} coordinate={{latitude: 4.3414303 , longitude: 15.3277476}}> 

Обновление. Если вы намерены отображать местоположение, определяемое событиями в вашем штате, вы можете: Я предполагаю, что местоположение в вашем штате является типом местоположения ({latitude: latitude, longitude: longitude}), вы может напрямую зацикливать this.props.events:

<MapView
      style={styles.container}
      initialRegion={this.state.focusedLocation}
      onPress={this.pickLocationHandler}
      showsUserLocation={true}
      ref={ref => this.map = ref} //For animating map movement
    >
      {userMarker}
      {this.props.events.map((marker, index) => {
        if(marker.location.latitude && marker.location.longitude) {
            const scaleStyle = {
              transform: [
                {
                  scale: interpolations[index].scale,
                },
              ],
            };
            const opacityStyle = {
              opacity: interpolations[index].opacity,
            };
            return (
              <MapView.Marker key={index} coordinate={marker.location}>
                <Animated.View style={[styles.markerWrap, opacityStyle]}>
                  <Animated.View style={[styles.ring, scaleStyle]} />
                    <View style={styles.marker} />
                </Animated.View>
              </MapView.Marker>
            );
        } else {
            return null;
        }
      })}
    </MapView>
person William Bridge    schedule 11.06.2019
comment
Как я могу получить доступ к моей долготе и широте в моем магазине Redux с помощью вашего примера / ответа / предложения? - person Liza Catherine Ombyaw; 11.06.2019
comment
У меня любопытный вопрос, появится ли ошибка, если в моем хранилище Redux нет значения location или events (долгота и широта)? - person Liza Catherine Ombyaw; 11.06.2019
comment
Да, вы должны предоставить координаты. У меня вопрос: 1- какой тип this.props.events: массив, строка или ...? 2- когда вы зацикливаете переменную this.state.markers с помощью инструкции карты, я предполагаю, что вы хотите отобразить несколько маркеров на карте, не могли бы вы рассказать, как вы устанавливаете эту переменную? - person William Bridge; 11.06.2019
comment
1. Это массив с 2 строками, 1 изображением и значением местоположения (долгота и широта). 2. Да, я хочу отобразить на карте несколько маркеров. Я установил эту переменную с помощью map, чтобы проверить, будет ли отображаться несколько маркеров на карте. Кроме того, я установил эту переменную, чтобы использовать ее для анимации, потому что у меня есть Animated.ScrollView (5 Card), поэтому каждый раз, когда я прокручиваю каждую карту, она будет перемещать ее по своей широте и долготе. Я добавлю код своего this.state.markers в свой вопрос. Спасибо! - person Liza Catherine Ombyaw; 12.06.2019
comment
Я обновил свой ответ на случай, если вы хотите отображать местоположение каждого события в вашем штате. - person William Bridge; 12.06.2019
comment
Я попробовал, и похоже, что он будет работать, но это дает мне ошибку. Там написано latlng cannot be null - a position is required. - person Liza Catherine Ombyaw; 13.06.2019
comment
Я снова обновил свой ответ: надеюсь, это поможет решить проблему. - person William Bridge; 13.06.2019
comment
Все еще та же ошибка. Я наблюдаю, я все еще получаю состояние location и его значение (широту и местоположение). Возможно, ошибка в указании долготы и широты. Я попробую другой подход. - person Liza Catherine Ombyaw; 14.06.2019
comment
Или я думаю, что неправильный - это coordinate из MapView.Marker. Я думаю, что он все еще указывает на массив состояний markers? Вместо состояния в Redux? - person Liza Catherine Ombyaw; 14.06.2019
comment
А может это this.props.events.location.value? - person Liza Catherine Ombyaw; 14.06.2019
comment
Я добавил все свои компоненты, чтобы лучше понимать поток приложения - person Liza Catherine Ombyaw; 14.06.2019
comment
Спасибо за усилия, @William Bridge! Без вас мне будет труднее решить эту проблему. Уже решено, смотрите мои отредактированные коды. Теперь у меня проблема с анимацией, но те же проблемы с Redux. - person Liza Catherine Ombyaw; 14.06.2019
comment
В EventCreator.js именно в функции placeAddedHandler (), не могли бы вы дать нам определение функции реквизита onAddEvent ()? - person William Bridge; 14.06.2019
comment
Кроме того, в EventCreator.js именно в функции placeAddedHandler () какой тип this.state.controls.location.value? - person William Bridge; 14.06.2019
comment
onAddEvent() - это функция отправки состояния в мой Redex Store, и placeAddedHandler() я использую ее для onPress моего TouchableOpacity. - person Liza Catherine Ombyaw; 15.06.2019
comment
this.state.controls.location.value - это состояние моих location и latitude внутри моего компонента EventCreator - person Liza Catherine Ombyaw; 15.06.2019