Taro React自定义TabBar使用useContext解决底部选中异常

Taro，React HooKs(useContext  , createContext)，@antmjs/vantui(这是UI组件)

// UserContext.js
import { createContext } from 'react';
const UserContext = createContext();
export default UserContext;

// app.js
import { useState } from 'react';
import Taro, { createContext, Provider } from '@tarojs/taro';
import './app.scss';
import UserContext from './UserContext';
function App({ children }) {
  const [selectedTab, setSelectedTab] = useState(0);
  return (
    <UserContext.Provider value={{ selectedTab, setSelectedTab }}>
      {children}
    </UserContext.Provider>
  );
}
export default App;

//app.config.js 
export default defineAppConfig({
  pages: [
    "pages/index/index",
    "pages/classification/index",
    "pages/shoppingCart/index",
    "pages/user/index",
  ],
  tabBar: {
    custom: true,
    list: [
      {
        pagePath: "pages/index/index",
        text: "主页",
      },
      {
        pagePath: "pages/classification/index",
        text: "分类",
      },
      {
        pagePath: "pages/shoppingCart/index",
        text: "购物车",
      },
      {
        pagePath: "pages/user/index",
        text: "我的",
      },
    ],
  },
  window: {
    backgroundTextStyle: "light",
    navigationBarBackgroundColor: "#fff",
    navigationBarTitleText: "WeChat",
    navigationBarTextStyle: "black",
  },
});

// custom-tab-bar/index.js
import { Tabbar, TabbarItem } from '@antmjs/vantui'
import Taro from '@tarojs/taro'
import React, { useEffect, useRef, useState } from 'react'
import { useContext } from 'react';
import UserContext from '../component/UserContext';
export default function index() {
    const { selectedTab, setSelectedTab} = useContext(UserContext);
    const [tabData, setTabData] = useState({
        list: [
            {
                id: 0,
                icon: 'home-o',
                text: '首页',
                url: 'pages/index/index',
            },
            {
                id: 1,
                icon: 'qr',
                text: '分类',
                url: 'pages/classification/indexe',
            },
            {
                id: 2,
                icon: 'shopping-cart-o',
                text: '购物车',
                url: 'pages/shoppingCart/index',
            },
            {
                id: 3,
                icon: 'manager-o',
                text: '我的',
                url: 'pages/user/index',
            },
        ]
    })
    const onChange = (e) => {
        setSelectedTab(e.detail)
        if (e.detail == 0) {
            Taro.switchTab({
                url: '/pages/index/index'
            })
        } else if (e.detail == 1) {
            Taro.switchTab({
                url: '/pages/classification/index'
            })
        } else if (e.detail == 2) {
            Taro.switchTab({
                url: '/pages/shoppingCart/index'
            })
        } else if (e.detail == 3) {
            Taro.switchTab({
                url: '/pages/user/index'
            })
        }
    }
    return (
        <Tabbar active={selectedTab} onChange={onChange}>
            {tabData.list.map(Item => {
                return <TabbarItem key={Item.id} icon={Item.icon}>
                    {Item.text}
                </TabbarItem>
            })}
        </Tabbar>
    )
}