处理创客任务列表已选专家过多时页面不显示问题

src/military/task/taskAdmin/index.jsx

@@ -41,6 +41,13 @@ export default Form.create()(({ form, showNotification, match, history, state })
   const [taskList, setTaskList] = useState([]);
   const [expertReview, setExpertReview] = useState('');
 
+  //查看评审规则、查看选取专家、发布评审任务
+  const [lookRules, setLookRules] = useState(false);
+  const [lookExperts, setLookExperts] = useState(false);
+  const [pulicReview, setPublicReview] = useState(false);
+  const [rules, setRules] = useState(undefined);
+  const [selectedExperts, setSelectedExperts] = useState(undefined);
+
   useEffect(()=>{
     setCurPage(hashDate(hash) || 1);
   },[hash])
@@ -360,16 +367,86 @@ export default Form.create()(({ form, showNotification, match, history, state })
     });
   }
 
+  //监听lookRules,lookExperts,pulicReview的变化，弹框
+  useEffect(()=>{
+
+    //评审规则
+    lookRules && rules && Modal.info({
+      className: 'publishReview',
+      title: "评审规则",
+      content:
+        <React.Fragment>
+          <div>{rules && rules.rule}</div>
+          <p>评分标准</p>
+          <div>
+            {rules.criterias.map(item=>{return <p key={Math.random()}>{item}</p>})}
+          </div>
+          <p>评审时间</p>
+          <div>{rules.reviewData}</div>
+        </React.Fragment>
+      ,
+    });
+    lookRules && setLookRules(false);
+
+    //已选取评审专家
+    lookExperts && selectedExperts && Modal.info({
+      className: 'publishReview',
+      title: "已选取评审专家",
+      content:
+        <PaginationTable
+        dataSource={selectedExperts}
+        columns={columnsExperts}
+        scroll={{ y: 395 }}/>,
+    });
+    lookExperts && setLookExperts(false);
+
+    //发布评审任务
+    pulicReview && rules && selectedExperts && Modal.confirm({
+      className: 'publishReview',
+      title: "发布评审任务",
+      centered: true,
+      content:
+        <React.Fragment>
+          <div className='tip'>
+            <i className='iconfont icon-erciqueren_icon'></i>
+            <span className='publicTitle'>确定发布此评审任务？确定发布后评审规则与评审专家信息将无法重新编辑</span>
+          </div>
+          <p>评审规则</p>
+          <div>{rules && rules.rule}</div>
+          <p>评分标准</p>
+          <div>
+            {rules.criterias.map(item=>{return <p key={Math.random()}>{item}</p>})}
+          </div>
+          <p>评审时间</p>
+          <div>{rules.reviewData}</div>
+          <p>已选取评审专家</p>
+          <PaginationTable
+            dataSource={selectedExperts}
+            columns={columnsExperts}
+            scroll={{ y: 230 }}/>
+        </React.Fragment>
+      ,
+      okText: '确定',
+      cancelText: '取消',
+      onOk() {
+        publishExpertsAndRules(record.id).then(response=>{
+          if(response && response.message==="发布成功"){
+            setReload(Math.random());
+          }
+        })
+      },
+    });
+    pulicReview && setPublicReview(false);
+  },[lookRules,lookExperts,pulicReview])
+
   //发布评审任务
   function publishTaskReview(record){
     if(!record.ruleEditedCount || !record.expertSelectedCount){
       message.error("请先编辑评审规则以及选取评选专家再发布此任务");
     }else{
-      let rules = undefined;
-      let selectedExperts = undefined;
       getRules({containerId: record.id, containerType: 1, statusString: 3}).then(response=>{
         if(response && response.message === "success"){
-          rules = response.data;
+          setRules(response.data);
         }
       })
       selectExpertList({containerId: record.id, containerType: 1, curPage:curPage, pageSize: 10000, curPage: 1,}).then(response=>{
@@ -379,79 +456,25 @@ export default Form.create()(({ form, showNotification, match, history, state })
             item.reviewAreas = `${item.reviewAreaOne} ${item.reviewAreaTwo ? `、${item.reviewAreaTwo}`:''} ${item.reviewAreaThree ? `、${item.reviewAreaThree}`:''}`;
             item.index = (index++) + (curPage > 1 ? (curPage - 1) * 10 : 0);
           }
-          selectedExperts = response.data.rows
+          setSelectedExperts(response.data.rows);
+          setPublicReview(true);
         }
       });
-      setTimeout(() => {
-        Modal.confirm({
-          className: 'publishReview',
-          title: "发布评审任务",
-          centered: true,
-          content:
-            <React.Fragment>
-              <div className='tip'>
-                <i className='iconfont icon-erciqueren_icon'></i>
-                <span className='publicTitle'>确定发布此评审任务？确定发布后评审规则与评审专家信息将无法重新编辑</span>
-              </div>
-              <p>评审规则</p>
-              <div>{rules && rules.rule}</div>
-              <p>评分标准</p>
-              <div>
-                {rules.criterias.map(item=>{return <p key={Math.random()}>{item}</p>})}
-              </div>
-              <p>评审时间</p>
-              <div>{rules.reviewData}</div>
-              <p>已选取评审专家</p>
-              <PaginationTable
-                dataSource={selectedExperts}
-                columns={columnsExperts}
-                scroll={{ y: 230 }}/>
-            </React.Fragment>
-          ,
-          okText: '确定',
-          cancelText: '取消',
-          onOk() {
-            publishExpertsAndRules(record.id).then(response=>{
-              if(response && response.message==="发布成功"){
-                setReload(Math.random());
-              }
-            })
-          },
-      });
-      }, 300);
     }
   }
 
   //已发布任务  查看评审规则
   function viewRules(record){
-    let rules = undefined;
     getRules({containerId: record.id, containerType: 1, statusString: '-1,1,2'}).then(response=>{
       if(response && response.message === "success"){
-        rules = response.data;
+        setRules(response.data);
+        setLookRules(true);
       }
     });
-    setTimeout(() => {
-      Modal.info({
-        className: 'publishReview',
-        title: "评审规则",
-        content:
-          <React.Fragment>
-            <div>{rules && rules.rule}</div>
-            <p>评分标准</p>
-            <div>
-              {rules.criterias.map(item=>{return <p key={Math.random()}>{item}</p>})}
-            </div>
-            <p>评审时间</p>
-            <div>{rules.reviewData}</div>
-          </React.Fragment>
-        ,
-      });
-    }, 300);
   }
 
   //已发布任务  查看已选专家
   function viewExperts(record){
-    let selectedExperts = undefined;
     selectExpertList({containerId: record.id, containerType: 1, curPage:curPage, pageSize: 10000, curPage: 1,}).then(response=>{
       if(response && response.message === "success" && Array.isArray(response.data.rows)){
         let index = 1;
@@ -459,20 +482,10 @@ export default Form.create()(({ form, showNotification, match, history, state })
           item.reviewAreas = `${item.reviewAreaOne} ${item.reviewAreaTwo ? `、${item.reviewAreaTwo}`:''} ${item.reviewAreaThree ? `、${item.reviewAreaThree}`:''}`;
           item.index = (index++) + (curPage > 1 ? (curPage - 1) * 10 : 0);
         }
-        selectedExperts = response.data.rows
+        setSelectedExperts(response.data.rows);
+        setLookExperts(true);
       }
     });
-    setTimeout(() => {
-      Modal.info({
-        className: 'publishReview',
-        title: "已选取评审专家",
-        content:
-          <PaginationTable
-          dataSource={selectedExperts}
-          columns={columnsExperts}
-          scroll={{ y: 395 }}/>,
-      });
-    }, 300);
   }
 
   function changeStatus(showUserMode, taskId) {