Recoil状态管理同步更新问题求助：如何读取更新后的状态？

问题描述 #

在使用Recoil时，组件内的状态更新是异步的。在useEffect中先后调用setSentAddresses和updateAddresses，后者读取的仍是未更新的旧状态，导致无法正确生成updatedAddresses。相关代码如下：

const Done = (props) => {
  const [fullAdState, setFullAddresses]: any = useRecoilState(fullAddressesStateAtom)
  const [sentAdState, setSentAdState] = useRecoilState(addressesSentStateAtom)
  const [updatedAddresses, setUpdatedAddresses] = useRecoilState(fullAddressesStateAtom)

  const setSentAddresses = () => {
    setFullAddresses([...fullAdState].map((adrs, i) => {
      return adrs.checked ? {...adrs, sent: true} : adrs
    }))
    setSentAdState([...sentAdState].map((val, idx) => {
      return fullAdState[idx].checked ? true : val
    }))     
  }

  const updateAddresses = () => {
    const arr = []
    fullAdState.map((adrs, idx) => {
      if (!sentAdState[idx]){
        arr.push(adrs)    
      }
    })
    setUpdatedAddresses(arr)
  }

  useEffect(() => {
    setSentAddresses();
    updateAddresses();
  },[])

  return (
    <div dir="rtl">
     ...
    </div>
  )
}

解决方法 #

方法1：使用函数式更新，基于最新状态计算 #

Recoil的状态设置器支持传入函数，参数为当前最新状态，可直接基于最新值操作，避免依赖组件内的旧状态快照。把所有更新逻辑合并，确保操作链基于最新状态：

useEffect(() => {
  setFullAddresses(prevFull => {
    // 先计算更新后的fullAdState
    const updatedFull = prevFull.map(adrs => adrs.checked ? {...adrs, sent: true} : adrs);
    // 基于updatedFull更新sentAdState
    setSentAdState(() => updatedFull.map(adrs => adrs.checked));
    // 直接用updatedFull计算最终的updatedAddresses
    const finalUpdatedAddresses = updatedFull.filter((_, idx) => !updatedFull[idx].checked);
    setUpdatedAddresses(finalUpdatedAddresses);
    return updatedFull;
  });
}, []);

方法2：拆分useEffect，依赖更新后的状态 #

将updateAddresses放到单独的useEffect中，依赖fullAdState和sentAdState，当这两个状态异步更新完成后，自动触发派生状态的更新：

const Done = (props) => {
  const [fullAdState, setFullAddresses]: any = useRecoilState(fullAddressesStateAtom)
  const [sentAdState, setSentAdState] = useRecoilState(addressesSentStateAtom)
  const [updatedAddresses, setUpdatedAddresses] = useRecoilState(fullAddressesStateAtom)

  const setSentAddresses = () => {
    setFullAddresses([...fullAdState].map((adrs, i) => {
      return adrs.checked ? {...adrs, sent: true} : adrs
    }))
    setSentAdState([...sentAdState].map((val, idx) => {
      return fullAdState[idx].checked ? true : val
    }))     
  }

  const updateAddresses = () => {
    const arr = fullAdState.filter((_, idx) => !sentAdState[idx])
    setUpdatedAddresses(arr)
  }

  // 初始化触发状态更新
  useEffect(() => {
    setSentAddresses();
  },[])

  // 依赖更新后的状态，自动触发派生更新
  useEffect(() => {
    updateAddresses();
  }, [fullAdState, sentAdState])

  return (
    <div dir="rtl">
     ...
    </div>
  )
}

方法3：使用Recoil Selector派生状态（推荐） #

如果updatedAddresses是fullAdState和sentAdState的派生值，无需手动维护状态，用selector自动计算，Recoil会自动处理依赖更新：

// 定义派生状态的selector
const updatedAddressesSelector = selector({
  key: 'updatedAddressesSelector',
  get: ({get}) => {
    const fullAd = get(fullAddressesStateAtom);
    const sentAd = get(addressesSentStateAtom);
    return fullAd.filter((_, idx) => !sentAd[idx]);
  },
  // 需要修改时可添加set方法
  set: ({set}, newValue) => {
    set(fullAddressesStateAtom, newValue);
  }
});

// 组件中使用
const Done = (props) => {
  const [fullAdState, setFullAddresses]: any = useRecoilState(fullAddressesStateAtom)
  const [sentAdState, setSentAdState] = useRecoilState(addressesSentStateAtom)
  // 直接获取派生状态，无需手动更新
  const updatedAddresses = useRecoilValue(updatedAddressesSelector);

  const setSentAddresses = () => {
    setFullAddresses(prev => prev.map(adrs => 
      adrs.checked ? {...adrs, sent: true} : adrs
    ))
    setSentAdState(prev => prev.map((val, idx) => 
      fullAdState[idx].checked ? true : val
    ))     
  }

  useEffect(() => {
    setSentAddresses();
  },[])

  return (
    <div dir="rtl">
     ...
    </div>
  )
}

内容的提问来源于stack exchange，提问作者ינון אטיאס