React切换标签页后toggle重复添加项？prevState问题如何解决

两个核心问题导致你描述的异常：

1. 引用类型相等判断逻辑错误：你用indexOf(coin)、list !== coin做判断时，本质是通过===比较对象的内存引用地址。切换标签页后，页面重新渲染拿到的coin是数据源重新返回的新对象，即使和picksList里已存的币种内容完全一致，二者内存地址不同，相等判断就会返回false，自然识别不到已存在的项，误触发新增逻辑。
2. 状态更新依赖闭包旧值：所有setPicksList调用都直接依赖当前渲染闭包中缓存的picksList变量，没有通过函数式更新拿到最新状态，跨页面切换、多标签页同步场景下很容易拿到过期状态做判断，进一步导致重复添加。
3. 现有逻辑缺少跨标签页状态同步能力，多标签页打开时各标签页的Context状态独立，localStorage变更不会自动同步到当前页面状态，也是潜在的不一致诱因。

直接调整Context Provider逻辑即可，不需要改子组件调用方式：

export const MyPicksContextProvider = props => {
  // 用函数形式初始化state，避免每次渲染重复解析localStorage
  const [picksList, setPicksList] = useState(
    () => JSON.parse(localStorage.getItem('picksList')) || []
  )

  // 状态变更时同步到localStorage
  useEffect(() => {
    localStorage.setItem("picksList", JSON.stringify(picksList));
  }, [picksList]);

  // 可选：监听storage事件，实现多标签页状态自动同步
  useEffect(() => {
    const handleStorageChange = (e) => {
      if (e.key === 'picksList' && e.newValue) {
        setPicksList(JSON.parse(e.newValue))
      }
    }
    window.addEventListener('storage', handleStorageChange)
    return () => window.removeEventListener('storage', handleStorageChange)
  }, [])

  const toggleCoin = (coin) => {
    // 用函数式更新，永远拿到最新的前序状态，避免闭包旧值问题
    setPicksList(prevList => {
      // 用币种唯一标识判断是否存在，禁止直接比较整个对象引用
      // 如果你项目里币种唯一字段不是id，替换成对应字段即可（比如coinId、symbol）
      const existIndex = prevList.findIndex(item => item.id === coin.id)
      if (existIndex === -1) {
        // 不存在则追加新项
        return [...prevList, coin]
      } else {
        // 存在则过滤掉对应项，实现删除
        return prevList.filter(item => item.id !== coin.id)
      }
    })
  }

  return (
    <MyPicksContext.Provider value={{
      picksList,
      toggleCoin
    }}>
      {props.children}
    </MyPicksContext.Provider>
  )
}

• 移除了单独的deleteCoin方法，将增删逻辑统一收敛到toggleCoin的函数式更新中，全程基于prevList计算，彻底规避闭包缓存旧状态的问题。
• 把对象直接比较的逻辑替换为基于唯一业务主键的匹配，从根源解决不同引用的同内容对象判断失效的问题。
• 初始化state改用函数写法，减少不必要的localStorage解析操作，优化性能。
• 新增的storage事件监听为可选能力，添加后多标签页打开时状态会自动同步，不会出现各标签页状态不一致的问题。

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