Преглед изворни кода

♻️ refactor(router): 统一使用useRouter钩子获取路由参数

- 替换Taro.getCurrentInstance().router为useRouter钩子,优化路由参数获取方式
- 移除address-edit页面中冗余的useState状态管理
- 简化search-result页面参数初始化逻辑,去除不必要的useEffect
- 涉及页面: address-edit, goods-detail, goods-list, order-detail, payment-success, payment, search-result
yourname пре 1 месец
родитељ
комит
aeea57804c

+ 6 - 10
mini/src/pages/address-edit/index.tsx

@@ -3,8 +3,8 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
-import { useState, useEffect } from 'react'
-import Taro from '@tarojs/taro'
+import { useEffect } from 'react'
+import Taro, { useRouter } from '@tarojs/taro'
 import { deliveryAddressClient } from '@/api'
 import { InferResponseType, InferRequestType } from 'hono'
 import { Navbar } from '@/components/ui/navbar'
@@ -33,15 +33,11 @@ type AddressFormData = z.infer<typeof addressSchema>
 export default function AddressEditPage() {
   const { user } = useAuth()
   const queryClient = useQueryClient()
-  const [addressId, setAddressId] = useState<number | null>(null)
 
-  // 获取地址ID
-  useEffect(() => {
-    const params = Taro.getCurrentInstance().router?.params
-    if (params?.id) {
-      setAddressId(parseInt(params.id))
-    }
-  }, [])
+  // 使用useRouter钩子获取路由参数
+  const router = useRouter()
+  const params = router.params
+  const addressId = params?.id ? parseInt(params.id) : null
 
   // 获取地址详情
   const { data: address } = useQuery({

+ 4 - 3
mini/src/pages/goods-detail/index.tsx

@@ -1,7 +1,7 @@
 import { View, ScrollView, Text, RichText } from '@tarojs/components'
 import { useQuery } from '@tanstack/react-query'
 import { useState, useEffect } from 'react'
-import Taro from '@tarojs/taro'
+import Taro, { useRouter } from '@tarojs/taro'
 import { goodsClient } from '@/api'
 // import { InferResponseType } from 'hono'
 import { Navbar } from '@/components/ui/navbar'
@@ -84,8 +84,9 @@ export default function GoodsDetailPage() {
     }
   ])
 
-  // 获取商品ID
-  const params = Taro.getCurrentInstance().router?.params
+  // 使用useRouter钩子获取路由参数
+  const router = useRouter()
+  const params = router.params
   const goodsId = params?.id ? parseInt(params.id) : 0
 
   const { data: goods, isLoading } = useQuery({

+ 4 - 3
mini/src/pages/goods-list/index.tsx

@@ -1,7 +1,7 @@
 import { View, ScrollView, Text } from '@tarojs/components'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { useState } from 'react'
-import Taro, { usePullDownRefresh , useReachBottom} from '@tarojs/taro'
+import Taro, { usePullDownRefresh , useReachBottom, useRouter} from '@tarojs/taro'
 import { goodsClient } from '@/api'
 import { InferResponseType } from 'hono'
 import { Navbar } from '@/components/ui/navbar'
@@ -17,8 +17,9 @@ export default function GoodsListPage() {
   const [activeCategory, setActiveCategory] = useState('all')
   const { addToCart } = useCart()
 
-  // 获取URL参数中的分类ID
-  const params = Taro.getCurrentInstance().router?.params
+  // 使用useRouter钩子获取路由参数
+  const router = useRouter()
+  const params = router.params
   const categoryId = params?.cateId || ''
 
   const categories = [

+ 4 - 3
mini/src/pages/order-detail/index.tsx

@@ -1,6 +1,6 @@
 import { View, ScrollView, Text, Image } from '@tarojs/components'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import Taro, { usePullDownRefresh } from '@tarojs/taro'
+import Taro, { usePullDownRefresh, useRouter } from '@tarojs/taro'
 import { orderClient } from '@/api'
 import { Navbar } from '@/components/ui/navbar'
 import OrderButtonBar from '@/components/order/OrderButtonBar'
@@ -10,8 +10,9 @@ import dayjs from 'dayjs'
 import './index.css'
 
 export default function OrderDetailPage() {
-  // 获取订单ID或订单号
-  const params = Taro.getCurrentInstance().router?.params
+  // 使用useRouter钩子获取路由参数
+  const router = useRouter()
+  const params = router.params
   const orderId = params?.id ? parseInt(params.id) : 0
   const orderNo = params?.order_no || ''
   const queryClient = useQueryClient()

+ 5 - 4
mini/src/pages/payment-success/index.tsx

@@ -17,8 +17,9 @@ interface PaymentSuccessParams {
 }
 
 const PaymentSuccessPage = () => {
-  // 获取页面参数 - 使用与订单详情页相同的方式
-  const params = Taro.getCurrentInstance().router?.params
+  // 使用useRouter钩子获取路由参数
+  const router = useRouter()
+  const params = router.params
   const orderId = params?.orderId ? parseInt(params.orderId) : 0
   const amount = params?.amount ? parseFloat(params.amount) : 0
 
@@ -66,7 +67,7 @@ const PaymentSuccessPage = () => {
   if (!hasValidParams) {
     return (
       <View className="min-h-screen bg-gray-50">
-        <Navbar title="支付结果" />
+        <Navbar title="支付结果" leftIcon="" />
         <View className="flex flex-col items-center justify-center flex-1">
           <View className="bg-white rounded-2xl p-8 text-center">
             <Text className="text-xl text-red-500 mb-4 block">参数错误</Text>
@@ -81,7 +82,7 @@ const PaymentSuccessPage = () => {
 
   return (
     <View className="min-h-screen bg-gray-50">
-      <Navbar title="支付成功" />
+      <Navbar title="支付成功" leftIcon="" />
       <View className="p-5">
       {/* 成功图标 */}
       <View className="flex justify-center mb-6">

+ 4 - 3
mini/src/pages/payment/index.tsx

@@ -3,7 +3,7 @@
  * 处理微信支付流程和状态管理
  */
 
-import Taro from '@tarojs/taro'
+import Taro, { useRouter } from '@tarojs/taro'
 import { useState } from 'react'
 import { View, Text } from '@tarojs/components'
 import { useQuery } from '@tanstack/react-query'
@@ -30,8 +30,9 @@ const PaymentPage = () => {
   const [isProcessing, setIsProcessing] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
 
-  // 获取页面参数 - 参照 goods-detail 页面的写法
-  const routerParams = Taro.getCurrentInstance().router?.params
+  // 使用useRouter钩子获取路由参数
+  const router = useRouter()
+  const routerParams = router.params
   const orderId = routerParams?.orderId ? parseInt(routerParams.orderId) : 0
   const amount = routerParams?.amount ? parseFloat(routerParams.amount) : 0
   const orderNo = routerParams?.orderNo

+ 9 - 10
mini/src/pages/search-result/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { View, Text, ScrollView } from '@tarojs/components'
 import { useInfiniteQuery } from '@tanstack/react-query'
-import Taro from '@tarojs/taro'
+import Taro, { useRouter } from '@tarojs/taro'
 import { Navbar } from '@/components/ui/navbar'
 import TDesignSearch from '@/components/tdesign/search'
 import GoodsList from '@/components/goods-list'
@@ -14,17 +14,16 @@ type GoodsResponse = InferResponseType<typeof goodsClient.$get, 200>
 type Goods = GoodsResponse['data'][0]
 
 const SearchResultPage: React.FC = () => {
-  const [keyword, setKeyword] = useState('')
-  const [searchValue, setSearchValue] = useState('')
   const { addToCart } = useCart()
 
-  // 获取页面参数
-  useEffect(() => {
-    const params = Taro.getCurrentInstance().router?.params
-    const searchKeyword = params?.keyword || ''
-    setKeyword(searchKeyword)
-    setSearchValue(searchKeyword)
-  }, [])
+  // 使用useRouter钩子获取路由参数
+  const router = useRouter()
+  const params = router.params
+  const searchKeyword = params?.keyword || ''
+
+  // 直接使用路由参数,无需useEffect
+  const [keyword, setKeyword] = useState(searchKeyword)
+  const [searchValue, setSearchValue] = useState(searchKeyword)
 
   const {
     data,