React Native如何重置useState初始值实现修改地址后View重新闪烁

现有代码优化建议 #

你当前的实现存在闭包陷阱风险，而且initialState的计数逻辑和触发逻辑耦合在一起，先把闪烁逻辑重构为更易触发的版本：

// 替换原来的两个state，用triggerBlink作为闪烁触发开关
const [isBlinkOn, setIsBlinkOn] = React.useState(false)
const [triggerBlink, setTriggerBlink] = React.useState(false)

React.useEffect(() => {
  if (!triggerBlink) return
  let blinkTimes = 0
  // 300ms切换一次颜色，2秒总共切换约7次，可自行调整间隔
  const blinkInterval = setInterval(() => {
    setIsBlinkOn(prev => !prev)
    blinkTimes++
    if (blinkTimes >= 7) {
      clearInterval(blinkInterval)
      setIsBlinkOn(false)
      setTriggerBlink(false)
    }
  }, 300)
  // 兜底2秒后强制清除定时器
  const clearTimer = setTimeout(() => {
    clearInterval(blinkInterval)
    setIsBlinkOn(false)
    setTriggerBlink(false)
  }, 2000)

  return () => {
    clearInterval(blinkInterval)
    clearTimeout(clearTimer)
  }
}, [triggerBlink])

View调用逻辑保持不变，把原来的state替换成isBlinkOn即可。

跨页面触发闪烁的三种实现方案 #

根据你的项目技术栈选最适配的即可：

方案1：React Navigation路由传参（最常用） #

如果修改地址页面和当前页面在同一个导航栈下：

1. 修改地址成功后跳转时携带触发参数：

// 修改地址页面的跳转逻辑
navigation.navigate('当前页面的路由名', { needBlink: true })

2. 当前页面监听路由参数变化触发闪烁：

React.useEffect(() => {
  if (route.params?.needBlink) {
    setTriggerBlink(prev => !prev)
    // 用完清空参数，避免下次进入页面重复触发
    navigation.setParams({ needBlink: undefined })
  }
}, [route.params?.needBlink])

方案2：全局事件总线（跨无关联页面/组件） #

适合两个页面没有直接导航关联的场景，用react-native-event-listeners轻量库实现：

1. 当前页面注册事件监听：

import { EventRegister } from 'react-native-event-listeners'

React.useEffect(() => {
  const listener = EventRegister.addEventListener('addressModifySuccess', () => {
    setTriggerBlink(prev => !prev)
  })
  // 页面卸载时移除监听
  return () => EventRegister.removeEventListener(listener)
}, [])

2. 修改地址成功后发送全局事件：

EventRegister.emit('addressModifySuccess')

方案3：全局状态管理（已接入状态库的项目） #

如果你的项目已经接入了Zustand/Redux/Mobx等全局状态库：

1. 在全局状态中新增needBlinkAddressTag标记位
2. 修改地址成功后将标记位设为true
3. 当前页面监听该标记位，触发闪烁后将标记位重置为false即可

内容的提问来源于stack exchange，提问作者Vikash Kumar Chaubey