feat: 定位到组件异常渲染的问题

src/container/listContainer/index.tsx

@@ -8,7 +8,7 @@ import { setStorage, getStorage } from "@/store/storage";
 import { NTRPTestEntryCard } from "@/components";
 import { EvaluateScene } from "@/store/evaluateStore";
 import "./index.scss";
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, useMemo } from "react";
 
 const ListContainer = (props) => {
   const {
@@ -26,6 +26,7 @@ const ListContainer = (props) => {
     style,
     collapse = false,
     defaultShowNum,
+    evaluateFlag,
   } = props;
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const loadingStartTimeRef = useRef<number | null>(null);
@@ -47,19 +48,17 @@ const ListContainer = (props) => {
   });
 
   useEffect(() => {
-    setShowNumber(
-      () => {
-        return defaultShowNum === undefined ? data?.length : defaultShowNum
-
-      })
-  }, [data])
+    setShowNumber(() => {
+      return defaultShowNum === undefined ? data?.length : defaultShowNum;
+    });
+  }, [data]);
 
   // 控制骨架屏显示逻辑
   useEffect(() => {
     if (loading) {
       // 开始加载时记录时间
       loadingStartTimeRef.current = Date.now();
-      
+
       // 延迟 300ms 后再显示骨架屏
       skeletonTimerRef.current = setTimeout(() => {
         setShowSkeleton(true);
@@ -102,6 +101,7 @@ const ListContainer = (props) => {
 
   // 对于没有ntrp等级的用户每个月展示一次, 插在第三个位置
   function insertEvaluateCard(list) {
+    if (!evaluateFlag) return list;
     if (!list || list.length === 0) {
       return list;
     }
@@ -122,6 +122,11 @@ const ListContainer = (props) => {
     return [item1, item2, item3, { type: "evaluateCard" }, ...rest];
   }
 
+  const memoizedList = useMemo(
+    () => insertEvaluateCard(data),
+    [evaluateFlag, data, userInfo.ntrp_level]
+  );
+
   // 渲染列表
   const renderList = (list) => {
     // 请求数据为空
@@ -137,12 +142,12 @@ const ListContainer = (props) => {
       );
     }
 
-    showNumber !== undefined && (list = list.slice(0, showNumber))
+    showNumber !== undefined && (list = list.slice(0, showNumber));
 
     // 渲染数据
     return (
       <>
-        {insertEvaluateCard(list).map((match, index) => {
+        {memoizedList.map((match, index) => {
           if (match.type === "evaluateCard") {
             return (
               <NTRPTestEntryCard key="evaluate" type={EvaluateScene.list} />
@@ -164,20 +169,33 @@ const ListContainer = (props) => {
       </View>
       {renderList(recommendList)} */}
       {/* 到底了 */}
-      {collapse ?
-        data?.length > defaultShowNum ?
-          data?.length > showNumber ?
-            <View className="collapse-btn fold" onClick={() => { setShowNumber(data?.length) }}>
+      {collapse ? (
+        data?.length > defaultShowNum ? (
+          data?.length > showNumber ? (
+            <View
+              className="collapse-btn fold"
+              onClick={() => {
+                setShowNumber(data?.length);
+              }}
+            >
               <Text>更多球局</Text>
               <Image src={require("@/static/userInfo/fold.svg")}></Image>
-            </View> :
-            <View className="collapse-btn" onClick={() => { setShowNumber(defaultShowNum) }}>
+            </View>
+          ) : (
+            <View
+              className="collapse-btn"
+              onClick={() => {
+                setShowNumber(defaultShowNum);
+              }}
+            >
               <Text>收起</Text>
               <Image src={require("@/static/userInfo/fold.svg")}></Image>
             </View>
-          :
-          null
-        : data?.length > 0 && <View className="bottomTextWrapper">到底了</View>}
+          )
+        ) : null
+      ) : (
+        data?.length > 0 && <View className="bottomTextWrapper">到底了</View>
+      )}
     </View>
   );
 };