Reducer返回新对象但React Native组件仍不渲染的Redux问题

看起来你遇到的问题主要来自两个关键的细节错误：异步操作的时序处理不当，以及数组引用未更新导致Redux无法检测到状态变化。让我一步步帮你理清并修复：

核心问题拆解 #

1. 异步位置获取的时序错误 #

navigator.geolocation.getCurrentPosition是异步API，你在它的回调函数外部就尝试读取this.props.latitude，这时候setCoordinates的dispatch还没完成，Redux状态还没更新，所以你push到数组里的永远是旧的纬度值，甚至是初始空值。

2. 数组引用未更新导致Redux不触发渲染 #

你在handleStart里定义了geolocationArray变量，每次定时器触发时都是往同一个数组里push元素，然后把这个数组dispatch给Redux。因为数组是引用类型，即使你修改了数组内容，Redux对比前后状态时会发现geolocationArrayToMap的引用没有变化，会判定状态未更新，因此不会触发组件重新渲染。

修复后的代码调整 #

1. 修正异步时序，将数组更新逻辑放到位置回调内 #

把push新坐标和dispatch数组的操作移到getCurrentPosition的成功回调里，确保拿到的是最新的经纬度值。

2. 每次更新数组时创建新的引用 #

不要直接修改原数组，而是用扩展运算符生成新数组，让Redux能检测到状态变化。

3. 添加组件卸载时的定时器清理（防止内存泄漏） #

下面是修改后的GeoBattery组件核心代码：

class GeoBattery extends Component {
  componentWillUnmount() {
    // 组件卸载时清除定时器，避免内存泄漏
    if (this.geoLocationInterval) {
      clearInterval(this.geoLocationInterval);
    }
  }

  handleStart() {
    // 初始化数组，放在外部以便持续维护
    let geolocationArray = [];
    let geolocationCounter = 0;
    
    this.geoLocationInterval = setInterval(() => {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const latitude = position.coords.latitude;
          const longitude = position.coords.longitude;
          console.log(latitude);
          
          // 1. 先更新单个坐标状态
          this.props.setCoordinates(latitude, longitude);
          
          // 2. 创建新数组，添加新坐标（用扩展运算符生成新引用）
          const newGeoArray = [
            ...geolocationArray,
            { id: geolocationCounter++, latitude, longitude }
          ];
          
          // 3. 更新数组状态
          this.props.updateGeolocationArray(newGeoArray);
          // 更新本地维护的数组
          geolocationArray = newGeoArray;
        },
        // 建议添加错误回调，避免定位失败无提示
        (error) => console.error('定位失败:', error)
      );
    }, 2000); // 你需求是每2秒，原代码是1000，这里修正为2000
  }

  handleStop() {
    clearInterval(this.geoLocationInterval);
  }

  handleNewLatitudeItems() {
    return this.props.geolocationArrayToMap.map(item => {
      return <Text key={item.id}> {item.latitude.toFixed(6)} </Text>; // 保留小数让显示更清晰
    });
  }

  render() {
    console.log('当前纬度:', this.props.latitude);
    const { buttonStyle, resultsStyle, resultContainer } = styles;
    return (
      <ScrollView style={buttonStyle}>
        <Button onPress={() => this.handleStart()}>START</Button>
        <Button onPress={() => this.handleStop()}>STOP</Button>
        <View style={resultContainer}>
          <View style={{ flex: 4 }}>
            <Text style={resultsStyle}> Lat: </Text>
            <Text style={{ fontSize: 12 }}> { this.handleNewLatitudeItems() } </Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

额外优化建议 #

• 给getCurrentPosition添加错误回调，方便排查定位失败的问题；
• 渲染纬度时可以用toFixed(6)保留小数，让显示更直观；
• 如果你的Redux版本较新，可以考虑使用@reduxjs/toolkit，它内置了Immer，可以自动处理不可变更新，避免这类引用问题。

这样修改后，组件应该能正常随着Redux状态的更新重新渲染，并且每次都能获取到最新的定位数据存入数组中。

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