React状态管理中的循环更新陷阱与解决方案

初始数据: [A, B, C]  (需要回显3项)
         ↓
第一批加载: 找到 A → 回显 A
         ↓
状态同步: 将当前状态 [A] 写回初始数据
         ↓
初始数据: [A]  (丢失了 B, C)
         ↓
第二批加载: 只知道需要回显 A，无法回显 B, C

// Effect 1: 数据 → 视图（分批加载）
useEffect(() => {
  const itemsToShow = source.filter(item => targetIds.includes(item.id))
  setSelected(itemsToShow)  // 部分数据
}, [availableData])

// Effect 2: 视图 → 数据（立即同步）
useEffect(() => {
  targetIds = selected.map(item => item.id)  // 覆盖原始数据
}, [selected])

useEffect(() => {
  const newIds = selected.map(item => item.id)
  const originalIds = initialData.split(',')
  
  // 关键判断：新数据是原始数据的真子集 → 中间状态
  const isPartialState = 
    newIds.every(id => originalIds.includes(id)) &&  // 是子集
    newIds.length < originalIds.length                // 且不完整
  
  // 只在非中间状态时同步
  if (!isPartialState) {
    syncBackToSource(newIds)
  }
}, [selected])

const originalIntent = useRef(null)

// 首次接收时保存原始意图
useEffect(() => {
  if (!originalIntent.current) {
    originalIntent.current = initialData
  }
}, [initialData])

// 始终基于原始意图进行回显
useEffect(() => {
  const targetIds = originalIntent.current.split(',')
  const found = availableData.filter(item => targetIds.includes(item.id))
  
  // 增量更新，不覆盖
  setSelected(prev => {
    const merged = [...prev]
    found.forEach(item => {
      if (!merged.some(m => m.id === item.id)) {
        merged.push(item)
      }
    })
    return merged
  })
}, [availableData])

const [phase, setPhase] = useState('loading')  // loading | editing

// 回显阶段：数据 → 视图
useEffect(() => {
  if (phase === 'loading') {
    const found = availableData.filter(item => targetIds.includes(item.id))
    setSelected(found)
    
    // 判断是否完成
    if (found.length === targetIds.length) {
      setPhase('editing')  // 切换阶段
    }
  }
}, [availableData, phase])

// 编辑阶段：视图 → 数据
useEffect(() => {
  if (phase === 'editing') {
    syncBackToSource(selected)
  }
}, [selected, phase])

function shouldSync(current, original) {
  const isSubset = current.every(item => original.includes(item))
  const isIncomplete = current.length < original.length
  return !(isSubset && isIncomplete)  // 非中间状态才同步
}

const intent = useRef(initialData)
// 所有操作基于 intent.current 而非可能被修改的 initialData

const phases = {
  INITIALIZING: 'init',
  LOADING: 'loading',
  READY: 'ready',
  EDITING: 'editing'
}

// 错误：不加判断的双向绑定
useEffect(() => setA(b), [b])
useEffect(() => setB(a), [a])  // 容易形成循环

// 错误：假设数据一次性就绪
useEffect(() => {
  const items = findItems(ids)
  setSelected(items)
  updateSource(items)  // 可能还没加载完
}, [availableData])

// 错误：在副作用中修改依赖的数据源
useEffect(() => {
  const result = process(source)
  source = result  // 修改了依赖，可能导致循环
}, [source])