React监听props传入Map的特定值变化，避免useEffect无限循环

针对你遇到的场景，这里有几个可行的解决方案：

方案1：在字段修改的源头直接同步 #

不需要依赖useEffect，而是在处理字段变更的函数中，判断当前是否需要同步邮寄地址，直接完成更新。这种方式最直接，也不会触发额外的Effect循环。

const handleValueMapChange = (key, value) => {
  setValueMap(prevMap => {
    const newMap = new Map(prevMap);
    // 更新当前修改的字段
    newMap.set(key, value);

    // 仅当修改的是主地址字段，且开启了"邮寄地址与主地址相同"时，同步邮寄地址
    const mainAddressFields = ['street', 'city', 'state', 'zip'];
    if (mainAddressFields.includes(key) && newMap.get('sameAsMA')) {
      const mailingFieldKey = `${key}Mailing`;
      newMap.set(mailingFieldKey, value);
    }

    return newMap;
  });
};

方案2：在useEffect中监听具体的Map值而非整个Map #

虽然Map没有直接的属性访问，但可以把需要监听的主地址值和单选按钮状态单独提取出来作为Effect的依赖，这样只有当这些值变化时才触发同步，避免监听整个Map导致的无限循环。

注意：需要确保handleValueMapChange是稳定的（比如用useCallback包裹），否则会造成不必要的Effect触发。

import { useEffect } from 'react';

// 假设handleValueMapChange已用useCallback处理
useEffect(() => {
  const sameAsMA = props.valueMap.get('sameAsMA');
  const street = props.valueMap.get('street');
  const city = props.valueMap.get('city');
  const state = props.valueMap.get('state');
  const zip = props.valueMap.get('zip');

  if (sameAsMA) {
    props.handleValueMapChange('streetMailing', street);
    props.handleValueMapChange('cityMailing', city);
    props.handleValueMapChange('stateMailing', state);
    props.handleValueMapChange('zipMailing', zip);
  }
}, [
  props.valueMap.get('sameAsMA'),
  props.valueMap.get('street'),
  props.valueMap.get('city'),
  props.valueMap.get('state'),
  props.valueMap.get('zip'),
  props.handleValueMapChange
]);

方案3：用useRef标记同步状态，避免无限循环 #

如果必须监听整个Map，可以借助useRef来标记当前是否正在执行同步操作，这样当同步导致Map更新时，跳过下一次Effect的执行，打破循环。

import { useEffect, useRef } from 'react';

const isSyncing = useRef(false);

useEffect(() => {
  // 如果正在同步，重置标记并返回，避免重复执行
  if (isSyncing.current) {
    isSyncing.current = false;
    return;
  }

  const sameAsMA = props.valueMap.get('sameAsMA');
  if (sameAsMA) {
    // 标记开始同步
    isSyncing.current = true;
    props.setValueMap(prevMap => {
      const newMap = new Map(prevMap);
      // 同步主地址到邮寄地址
      newMap.set('streetMailing', prevMap.get('street'));
      newMap.set('cityMailing', prevMap.get('city'));
      newMap.set('stateMailing', prevMap.get('state'));
      newMap.set('zipMailing', prevMap.get('zip'));
      return newMap;
    });
  }
}, [props.valueMap, props.setValueMap]);

内容的提问来源于stack exchange，提问作者gene b.