改-作业服务-修改渲染分页

pages/jobServices/index.page.tsx

@@ -5,8 +5,7 @@ import Layout from "~/components/layout";
 import ContentBox from '~/components/contentBox';
 import { useRouter } from "next/router";
 import Filter, { FilterResult } from "~/components/filter";
-import api from "./api";
-import {DomType} from '~/components/contentBox/interface';
+import api , {Job} from "./api";
 // 此函数在构建时被调用
 export async function getServerSideProps() {
   return {
@@ -17,23 +16,25 @@ export async function getServerSideProps() {
 export default function JobServices() {
   const router = useRouter();
 
-  const leftDom = <div className='item' onClick={() => router.push('/jobServices/detail/1')}>
+  const leftDom = (item:Job) => {
+    return (<div key={item.id} className='item' onClick={() => router.push('/jobServices/detail/1')}>
     <div className="item-top">
         <div className="value">
                 <div className="value-left">
-                  <div className="label">asdasdasdasdasasdasdasdasdasasdasdasdasdas</div>
-                  <div className="com">asdasdasdasdas</div>
+                  <div className="label">{item.serviceName}</div>
+                  <div className="com">{item.teamName}</div>
                 </div>
-                <div className="value-right"><span className="money">¥6600</span> <span className="unit">/平</span></div>
+                <div className="value-right"><span className="money">{item.price}</span> <span className="unit">/平</span></div>
         </div>
     </div>
     <div className="item-bottom">
-          <div className="bottom-left">114条评价</div>
+          <div className="bottom-left">{ Math.round( Math.random()*(150-100)+100) }条评价</div>
           <div className="bottom-right">专业飞手团队，精通巡航业务</div>
     </div>
-  </div>
+  </div>)
+  }
 
-  const rightDom = <div className="advertisement">
+  const rightDom = <div className="advertisement" key={1}>
         112312312312
   </div>
 
@@ -48,21 +49,7 @@ export default function JobServices() {
       .then((res) => {
         // setProductList(res.result?.list || []);
         
-        setProductList(res.result?.list.map(item=>{return { element:<div key={item.id} className='item' onClick={() => router.push('/jobServices/detail/1')}>
-        <div className="item-top">
-            <div className="value">
-                    <div className="value-left">
-                      <div className="label">{item.serviceName}</div>
-                      <div className="com">{item.teamName}</div>
-                    </div>
-                    <div className="value-right"><span className="money">{item.price}</span> <span className="unit">/平</span></div>
-            </div>
-        </div>
-        <div className="item-bottom">
-              <div className="bottom-left">{ Math.round( Math.random()*(150-100)+100) }条评价</div>
-              <div className="bottom-right">专业飞手团队，精通巡航业务</div>
-        </div>
-      </div> }}))
+        setProductList(res.result?.list.map(item=>{return { element: leftDom(item) }}))
         
       });
   }, []);