初始數(shù)據(jù): [A, B, C]  (需要回顯3項(xiàng))
         ↓
第一批加載: 找到 A → 回顯 A
         ↓
狀態(tài)同步: 將當(dāng)前狀態(tài) [A] 寫(xiě)回初始數(shù)據(jù)
         ↓
初始數(shù)據(jù): [A]  (丟失了 B, C)
         ↓
第二批加載: 只知道需要回顯 A，無(wú)法回顯 B, C

// Effect 1: 數(shù)據(jù) → 視圖（分批加載）
useEffect(() => {
  const itemsToShow = source.filter(item => targetIds.includes(item.id))
  setSelected(itemsToShow)  // 部分?jǐn)?shù)據(jù)
}, [availableData])

// Effect 2: 視圖 → 數(shù)據(jù)（立即同步）
useEffect(() => {
  targetIds = selected.map(item => item.id)  // 覆蓋原始數(shù)據(jù)
}, [selected])

useEffect(() => {
  const newIds = selected.map(item => item.id)
  const originalIds = initialData.split(',')
  
  // 關(guān)鍵判斷：新數(shù)據(jù)是原始數(shù)據(jù)的真子集 → 中間狀態(tài)
  const isPartialState = 
    newIds.every(id => originalIds.includes(id)) &&  // 是子集
    newIds.length < originalIds.length                // 且不完整
  
  // 只在非中間狀態(tài)時(shí)同步
  if (!isPartialState) {
    syncBackToSource(newIds)
  }
}, [selected])

const originalIntent = useRef(null)

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

// 始終基于原始意圖進(jìn)行回顯
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

// 回顯階段：數(shù)據(jù) → 視圖
useEffect(() => {
  if (phase === 'loading') {
    const found = availableData.filter(item => targetIds.includes(item.id))
    setSelected(found)
    
    // 判斷是否完成
    if (found.length === targetIds.length) {
      setPhase('editing')  // 切換階段
    }
  }
}, [availableData, phase])

// 編輯階段：視圖 → 數(shù)據(jù)
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)  // 非中間狀態(tài)才同步
}

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

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

// 錯(cuò)誤：不加判斷的雙向綁定
useEffect(() => setA(b), [b])
useEffect(() => setB(a), [a])  // 容易形成循環(huán)

// 錯(cuò)誤：假設(shè)數(shù)據(jù)一次性就緒
useEffect(() => {
  const items = findItems(ids)
  setSelected(items)
  updateSource(items)  // 可能還沒(méi)加載完
}, [availableData])

// 錯(cuò)誤：在副作用中修改依賴的數(shù)據(jù)源
useEffect(() => {
  const result = process(source)
  source = result  // 修改了依賴，可能導(dǎo)致循環(huán)
}, [source])