Отображение массива состояний в реагировать на натив - PullRequest
Новая
       73

Отображение массива состояний в реагировать на натив

0 голосов
/ 27 апреля 2020

Я не уверен, что происходит не так. Я импортирую функцию, которая использует useState и useEffect. функция возвращает переменную в моем состоянии с данными из вызова выборки. Однако, когда я пытаюсь отобразить эти данные, я получаю сообщение об ошибке: карта не определена. Мой синтаксис выглядит правильно, и это работает в обычном режиме, поэтому я не уверен, что происходит сейчас. Я получаю ответ обратно, файл импортируется / экспортируется правильно, и состояние обновляется (используемый APIKey скрыт для этого поста), и указатели были бы хорошими!

код для данных и состояние обновления: 

export function grabLocationData() {
  const [data, updateData] = useState([]);
  console.log("Data!", data);
  const [location, updateLocation] = useState("");
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        console.log("lat", position.coords.latitude);
        console.log("lng", position.coords.longitude);
        const { latitude, longitude } = position.coords;
        updateLocation(`${latitude},${longitude}`);
      },
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
    const url = `https://maps.googleapis.com/maps/api/place/textsearch/json?query=${query}&location=${location}&radius=10000&key=${apiKey}`;
    console.log("console log!!!", url);
    fetch(url)
      .then((response, err) => {
        if (err) throw err;
        return response.json();
      })
      .then((responseJson) => {
        updateData(responseJson);
      });
  }, []);
  return data;
}

код для сопоставления 

export default Locations = (props) => {
  const apiKey = "AIzaSyD3o3hDRwSZTVhlUIDOjGQ1ZqevG6fnWII";
  const data = grabLocationData();
  console.log(data);
  return (
    <ScrollView>
      {data.results.map((bank) => {
        return <View>{bank.name}</View>;
      })}
    </ScrollView>
  );
};

1 Ответ

3 голосов
/ 27 апреля 2020

Как сказал @Will в комментарии, вы можете попытаться разделить ваш код на два разных эффекта. Вы будете использовать состояние местоположения в качестве deps для запуска второго эффекта. 

export function grabLocationData() {
  const [data, updateData] = useState([]);
  const [location, updateLocation] = useState('');
  const [url, setUrl] = setState(
    `https://maps.googleapis.com/maps/api/place/textsearch/json?query=${query}&location=${location}&radius=10000&key=${apiKey}`
  );

  // Effect triggered after the location changes
  useEffect(() => {
    // Prevent the effect to be triggered on initial render, only location's update
    if (location !== []) {
      fetch(url)
        .then((response, err) => {
          if (err) throw err;
          return response.json();
        })
        .then((responseJson) => {
          updateData(responseJson);
        });
    }
  }, [location]);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        updateLocation(`${latitude},${longitude}`);
      },
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  });

  return data;
}

Я добавил URL-адрес как состояние, но так как я не знаю, куда приходят переменные query и apiKey от, не стесняйтесь делать все, что вы хотите с этим.

...