Реагируйте на родные реквизиты, не сохраняя в новый массив - PullRequest
Новая
       87

Реагируйте на родные реквизиты, не сохраняя в новый массив

0 голосов
/ 29 октября 2019

Я передаю реквизит вложенному компоненту. Реквизит поступает корректно, но я не могу передать его в новый массив, например так: 

import React, {useState, useEffect} from 'react';
import {StyleSheet, View} from 'react-native'
import MapView, {Marker} from 'react-native-maps';
    const Map = ({navigation, locationsOne, locationsTwo, locationsThree}) => { //these are coming in correctly when I console.log ie: {"coords":{"accuracy":602,"altitude":0,"heading":0,"latitude":99.4210083,"longitude":-100.0839934,"speed":0},"mocked":false,"timestamp":1572363100628}
        const [markers, setMarkers] = useState([
          {
            location : locationsOne,
            title: 'One'
          },
          {
            location : locationsTwo,
            title: 'Two'
          },
          {
            location : locationsThree,
            title: 'Three'
          }
        ]);
    return (
    <MapView style={styles.map} initialRegion={currentLocation.coords}>
      {markers.map((locationTEST) => (
        console.log('location: ' + JSON.stringify(locationTEST)) //this returns nothing in the locations arrays ie: {"location":[],"title":"One"}
         <MapView.Marker
           title="This is a title"
           description="This is a description"
           coordinate={{
             latitude: locationTEST.location.coords.latitude,
             longitude: locationTEST.location.coords.longitude,
           }}
         />
      ))}
</MapView>
);

значение locationOne выглядит так: {"coords":{"accuracy":602,"altitude":0,"heading":0,"latitude":99.4210083,"longitude":-100.0839934,"speed":0},"mocked":false,"timestamp":1572363100628}

Как получилосьЯ не могу взять реквизит и передать его в новый массив (маркеры) массива?

Ответы [ 2 ]

2 голосов
/ 30 октября 2019

Когда <Map/> визуализируется в первый раз, locationsOne все еще содержит [].

Когда реквизит (означает locationsOne изменился), состояние не изменилось.

Поэтому вы должны использоватьEffect для обновления состояния при смене реквизита. 

const [markers, setMarkers] = useState ...

useEffect(() => {
  const newMarkers = [
    {
      location : locationsOne,
      title: 'One'
    },
    {
      location : locationsTwo,
      title: 'Two'
    },
    {
      location : locationsThree,
      title: 'Three'
    }
  ];
  setMarkers(newMarkers);
}, [locationsOne, locationsTwo, locationsThree]);
0 голосов
/ 30 октября 2019

Вместо того, чтобы устанавливать массив обратных вызовов useEffect [] (это приводило к сбою системы, так как при каждом изменении они перезапускали местоположения, в результате чего местоположения вызывались 1400 раз), мне просто нужно было установить setMarkers () какитак: 

useEffect(() => {
    const newMarkers = [
    {
      location : locationsOne,
      title: 'One'
    },
    {
      location : locationsTwo,
      title: 'Two'
    },
    {
      location : locationsThree,
      title: 'Three'
    }
  ];
  setMarkers(newMarkers);
}, []);
...