ReactNative maximum call stack size exceeded の原因

Question

ReactNativeでExpoを使ったアプリの開発をしています。
アプリの簡単な内容としてはアプリからユーザが位置情報を持った投稿をfirestoreに投稿し
他ユーザはマップの中心近くの投稿を検索することでMapViewにマーカーが立ち、投稿を見ることができるというものです。
エラー詳細は

RangeError:maximum call stack size exceeded 
This error is located at:
in Image(at MapScreen.js)
in AIRMapMarker(at MapMarker.js)
in MapMarker(at MapScreen.js)

と出ているとおりImageコンポーネントでエラーが起きていると思っているのですが原因がわかりません。
RangeError:maximum call stack size exceeded というエラーからして再帰処理が起きていると思うのですが、どこで起きているのか分からず、疑い深い部分としてはsetStateすると再レンダリングがかかるらしく、stateが関係しているのではと思っています。

質問、お時間ある方よろしくお願いします。

追記(エラーが起きる動作を書いていませんでした)
アプリ起動時componentDidMountのgetLocationAsyncを呼び出し、getLocationAsync内のgetMusicで、そこから画面の中心近くの投稿をfirestoreから取得しmapにmarkerを表示するのですが、
Mapを動かして中心を変更した後、再検索しようと再度getMusic関数を呼び出すと上記のエラーが起きます。

import React from "react";
import styled from "styled-components";
import {
  View,
  Text,
  SafeAreaView,
  StatusBar,
  AsyncStorage,
  Image,
} from "react-native";
import { SearchBar } from "react-native-elements";
import MapView from "react-native-maps";
import { Callout, Marker } from "react-native-maps";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import { TouchableOpacity } from "react-native-gesture-handler";
import { Ionicons } from "@expo/vector-icons";
import { connect } from "react-redux";
import SoundLocation from "../components/Location";
import firebase from "../components/Firebase";
import { GeoFirestore } from "geofirestore";

function mapStateToProps(state) {
  return { action: state.action };
}

function mapDispatchToProps(dispatch) {
  return {};
}

const items = [];
const firestore = firebase.firestore();
const geofirestore = new GeoFirestore(firestore);
const geocollection = geofirestore.collection("posts");

class MapScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };

  constructor(props) {
    super(props);
    this.state = {
      latitude: null,
      longitude: null,
      region: {
        latitude: null,
        longitude: null,
        latitudeDelta: 0.02,
        longitudeDelta: 0.02,
      },
      firstQuery: "",
      message: "位置情報取得中",
      display: "none",
      items: [],
    };
    this.onRegionChangeComplete = this.onRegionChangeComplete.bind(this);
  }

  componentDidMount() {
    StatusBar.setBarStyle("dark-content", true);
    this.retrieveName();
    this.getLocationAsync();
  }

  componentDidUpdate() {

  }

  retrieveName = async () => {
    try {
      const email = await AsyncStorage.getItem("email");
      if (email !== null) {
        this.setState({
          display: "inline",
        });
      } else {
        this.setState({
          display: "none",
        });
      }
    } catch (error) {}
  };

  getLocationAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== "granted") {
      this.setState({
        message: "位置情報のパーミッションの取得に失敗しました。",
      });
      return;
    }
    let location = await Location.getCurrentPositionAsync({});
    var new_state = {
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      latitudeDelta: 0.02,
      longitudeDelta: 0.02,
    };
    this.setState({
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      region: new_state,
    });
    this.getMusic();
  };

  //検索
  getMusic = function () {
    const query = geocollection.near({
      center: new firebase.firestore.GeoPoint(
        this.state.region.latitude,
        this.state.region.longitude
      ),
      //delta * 100のあたい(緯度一度は約111kmらしい)
      radius: this.state.region.latitudeDelta * 100,
    });
    query.get().then((values) => {
      items.length = 0;
      values.docs.forEach(function (value, index) {
        //itemsに格納する処理
        console.log(value.data().title);
        items.push({
          latitude: value.data().coordinates._lat,
          longitude: value.data().coordinates._long,
          icon: value.data().icon,
          url: value.data().URL,
          artist: value.data().artist,
          title: value.data().title,
        });
      });
      this.setState(
        {
          items: items,
        },
        function () {
          //console.log(this.state.items);
        }
      );
    });
  };

  getTest = () => {
    //console.log(this.map.context);
    this.map.animateToRegion(
      {
        latitude: this.state.latitude,
        longitude: this.state.longitude,
        latitudeDelta: 0.02, //小さくなるほどズーム
        longitudeDelta: 0.02,
      },
      1000
    );
  };

  _onPressButton = async function (url) {
    //省略
  };

  onPlaybackStatusUpdate = (status) => {
　　//省略
  };

  onRegionChangeComplete(region) {
    var new_state = {
      latitude: region.latitude,
      longitude: region.longitude,
      latitudeDelta: region.latitudeDelta,
      longitudeDelta: region.longitudeDelta,
    };
    this.setState({
      region: new_state,
    });
  }

  render() {
    if (this.state.latitude && this.state.longitude) {
      return (
        <RootView>
          <View>
            <SafeAreaView
              style={{
                backgroundColor: "yellow",
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <SearchBar
                round
                onClearText={(text) => console.log(text)}
                onChangeText={(query) => {
                  this.setState({ firstQuery: query });
                }}
                returnKeyType="search"
                value={this.state.firstQuery}
                onEndEditing={() => console.log(this.state.firstQuery)}
                containerStyle={{
                  width: "80%",
                  borderRadius: 20,
                  marginBottom: 5,
                  marginLeft: 10,
                }}
              />
              <View
                style={{
                  flex: 1,
                  position: "absolute",
                  top: 50,
                  right: 20,
                }}
              >
                <TouchableOpacity onPress={() => this.getMusic()}>
                  <Ionicons name="md-wifi" size={32} color="black" />
                </TouchableOpacity>
              </View>
            </SafeAreaView>
          </View>
          <MapView
            ref={(map) => {
              this.map = map;
            }}
            style={{ flex: 1 }}
            initialRegion={{
              latitude: this.state.latitude,
              longitude: this.state.longitude,
              latitudeDelta: 0.02, //小さくなるほどズーム
              longitudeDelta: 0.02,
            }}
            onRegionChangeComplete={(region) =>
              this.onRegionChangeComplete(region)
            }
            showsUserLocation={true}
            showsMyLocationButton={true}
          >
            {this.state.items.map((item, index) => (
              <Marker
                key={index}
                coordinate={{
                  latitude: item.latitude,
                  longitude: item.longitude,
                }}
              >
                <Image
                  source={{ uri: item.icon }}
                  resizeMode="contain"
                  style={{ width: 44, height: 44 }}
                />
                <Callout onPress={() => this._onPressButton(item.url)}>
                  <Location
                    key={index}
                    image={require("../assets/background.jpg")}
                    title={item.title}
                    artist={item.artist}
                    logo={{ uri: item.icon }}
                    author="author"
                    avatar={require("../assets/avatar.jpg")}
                    caption="caption"
                  />
                </Callout>
              </Marker>
            ))}
          </MapView>
          <View
            style={{
              flex: 1,
              position: "absolute",
              bottom: 30,
              left: 30,
            }}
          >
            <TouchableOpacity onPress={() => this.getTest()}>
              <Ionicons name="ios-navigate" size={48} color="black" />
            </TouchableOpacity>
          </View>
          <View
            style={{
              flex: 1,
              position: "absolute",
              bottom: 30,
              right: 30,
            }}
          >
            <TouchableOpacity
              onPress={() => {
                this.props.navigation.push("Modal");
              }}
            >
              <Test source={require("../assets/avatar.jpg")} />
            </TouchableOpacity>
          </View>
        </RootView>
      );
    }
    return (
      <View style={{ flex: 1, justifyContent: "center" }}>
        <Text>{this.state.message}</Text>
      </View>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MapScreen);

const RootView = styled.View`
  flex: 1;
`;

const Test = styled.Image`
  width: 44px;
  height: 44px;
  background: black;
  border-radius: 22px;
  margin-left: 20px;
`;

Comments

[hoshi-takanori]

これでしょうか？
https://stackoverflow.com/a/57424511/1019868

[rashild]

今回の質問とは関係なさそうです。
エラー内容は変わっていませんでした。
ありがとうございます

Answer 1

すみません、自己解決しました。
FirestoreのGeoPointを手動で操作したせいで、GeoFirestoreが上手く動作していなかったようでデータを作り直したら正常に動作しました。
しかし、hoshi-takanoriさんの提案も起動時に何度も呼び出されている原因がわかっていなかったので大変助かりました。
ありがとうございました。