React Native箭头函数与geoQuery结合使用问题咨询

我明白你在React Native里结合箭头函数和geoQuery时遇到的困惑啦！结合你之前发过的相关帖子，我来帮你梳理下这个问题的关键点和解决方法～

1. 回调函数的this指向踩坑 #

你代码里给geoQuery.on("key_moved")传的是普通函数作为回调，这会导致回调内部的this不再指向组件实例，自然就没法正确访问this.props.userID。把这个普通函数换成箭头函数就能完美解决这个指向问题：

myFunction = () => {
  // 直接绑定箭头函数作为geoQuery的回调
  const onKeyMovedRegistration = geoQuery.on("key_moved", (key, location, distance) => {
    console.log('Test log');
    if (key !== this.props.userID) {
      // 这里的this现在能正确指向组件实例，顺利访问props/state
      // 继续你的findKey逻辑处理
    }
  });
}

2. 数据更新要结合组件状态 #

如果arraySearchResult是用来渲染UI的列表数据，直接用普通变量存储的话，数据更新后不会触发组件重渲染。建议把它放到组件的state里管理：

// 先在组件里初始化状态
state = {
  arraySearchResult: []
};

myFunction = () => {
  const onKeyMovedRegistration = geoQuery.on("key_moved", (key, location, distance) => {
    console.log('Test log');
    if (key !== this.props.userID) {
      // 假设findKey是你的自定义查找函数，返回匹配结果
      const newItem = findKey(...);
      // 用setState更新状态，自动触发组件重渲染
      this.setState(prevState => ({
        arraySearchResult: [...prevState.arraySearchResult, newItem]
      }));
    }
  });
}

3. 别忘了清理监听防止内存泄漏 #

geoQuery的事件监听会一直绑定在实例上，直到你手动取消。一定要在组件卸载时清理这个监听，避免内存泄漏：

componentDidMount() {
  // 组件挂载时注册监听，并把注册实例存在组件上
  this.keyMovedListener = geoQuery.on("key_moved", (key, location, distance) => {
    // 处理逻辑
  });
}

componentWillUnmount() {
  // 组件卸载时取消监听
  this.keyMovedListener?.cancel();
}

完整可参考的示例代码 #

import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';

class GeoQueryExample extends Component {
  state = {
    arraySearchResult: []
  };

  componentDidMount() {
    // 假设geoQuery是你已经初始化好的地理位置查询实例
    this.keyMovedListener = this.props.geoQuery.on("key_moved", (key, location, distance) => {
      console.log('检测到位置变化:', key, location);
      if (key !== this.props.userID) {
        const matchedItem = this.findKeyInDataSource(key);
        if (matchedItem) {
          this.setState(prevState => ({
            arraySearchResult: [...prevState.arraySearchResult, matchedItem]
          }));
        }
      }
    });
  }

  componentWillUnmount() {
    // 安全取消监听
    this.keyMovedListener?.cancel();
  }

  // 自定义的查找函数示例
  findKeyInDataSource = (targetKey) => {
    // 这里替换成你的实际数据查找逻辑
    const dataSource = this.props.dataSource;
    return dataSource.find(item => item.key === targetKey);
  };

  render() {
    return (
      <View style={{ padding: 20 }}>
        <Text>位置变化结果列表:</Text>
        <FlatList
          data={this.state.arraySearchResult}
          keyExtractor={item => item.key}
          renderItem={({ item }) => (
            <Text style={{ marginTop: 10 }}>
              {item.name} - 距离: {item.distance}m
            </Text>
          )}
        />
      </View>
    );
  }
}

export default GeoQueryExample;

内容的提问来源于stack exchange，提问作者Bisclavret