React Native Google Map点击标记改颜色遇无限重渲染错误

问题原因 #

你直接在组件函数体顶层调用了setPropCopy，组件每次渲染都会执行这段代码，而调用setState又会触发组件重新渲染，由此形成无限循环，所以触发了"Too many re-renders"错误。

修复方案 #

1. 正确初始化状态

如果props.data仅在组件初始化时传入，可直接将映射逻辑放到useState的函数式初始值中，这样只会执行一次：

const [propCopy, setPropCopy] = useState(() => 
  props.data.map(v => ({...v, pincol: 'red'}))
);

如果props.data后续可能更新，需要用useEffect监听其变化来同步更新状态：

import { useEffect, useState } from 'react';

const MapComponent = ({ data }) => {
  const [propCopy, setPropCopy] = useState([]);

  useEffect(() => {
    // 仅当props.data变化时，重新生成带pincol的数组
    const newMarkerData = data.map(v => ({...v, pincol: 'red'}));
    setPropCopy(newMarkerData);
  }, [data]); // 依赖数组：只有data改变时才执行回调
  // ...
};

2. 实现点击修改标记颜色

修改状态时要遵循React的不可变原则，不能直接修改原数组，需创建新副本后更新：

const handleMarkerPress = (index) => {
  setPropCopy(prevData => {
    // 复制原数组
    const updatedData = [...prevData];
    // 修改对应索引的标记颜色，同时保留原有属性
    updatedData[index] = {...updatedData[index], pincol: 'green'};
    return updatedData;
  });
};

// 渲染Marker组件
<MapView>
  {propCopy.map((item, index) => (
    <Marker
      key={item.id} // 必须添加唯一key，避免渲染异常
      coordinate={item.coordinate}
      pinColor={item.pincol}
      onPress={() => handleMarkerPress(index)}
    />
  ))}
</MapView>

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