React组件中如何在useEffect内更新依赖项且避免无限循环

你的代码触发无限循环的核心原因是：useEffect依赖了members状态，每次调用setMembers修改members后，都会重新触发useEffect，进而再次执行过滤和设置操作，形成闭环。以下是几种适配你场景的解决方案：

方案1：添加存在性判断，仅当需要修改时更新 #

在执行setMembers前，先检查当前members中是否存在需要移除的项（即name为'Bob'的成员），只有存在时才执行过滤和更新操作。当过滤完成后，后续useEffect触发时因无符合条件的项，不会再调用setMembers，循环终止。

useEffect(() => {
  const hasBob = members.some(item => item.name === 'Bob');
  if (members.length > 0 && hasBob) {
    setMembers(members.filter(item => item.name !== 'Bob'));
  }
}, [members]);

方案2：函数式更新+引用相等性检查 #

使用setMembers的函数式更新形式获取最新状态，同时对比过滤前后的数组是否完全一致，若一致则返回原状态，避免不必要的state变更触发重渲染。

useEffect(() => {
  if (members.length === 0) return;
  
  setMembers(prevMembers => {
    const filtered = prevMembers.filter(item => item.name !== 'Bob');
    // 对比原数组与过滤后数组是否完全相同，相同则返回原状态，不触发更新
    if (prevMembers.length === filtered.length) {
      let isSame = true;
      for (let i = 0; i < prevMembers.length; i++) {
        if (prevMembers[i].name !== filtered[i].name) {
          isSame = false;
          break;
        }
      }
      if (isSame) return prevMembers;
    }
    return filtered;
  });
}, [members]);

注：若数组项是复杂对象，可根据实际字段自定义更精准的对比逻辑，避免JSON.stringify带来的性能损耗。

方案3：标记处理状态，仅执行一次过滤 #

如果该过滤逻辑仅需在组件首次加载时执行一次，可使用useRef标记是否已完成处理，避免后续members变更重复触发过滤。

const processedRef = useRef(false);

useEffect(() => {
  if (members.length > 0 && !processedRef.current) {
    setMembers(members.filter(item => item.name !== 'Bob'));
    processedRef.current = true;
  }
}, [members]);

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