school change optimize

src/components/passport/studentRoot/index.js

@@ -32,7 +32,7 @@ class StudentRoot extends PureComponent {
       isCollege: false,
       list: [],
       schoolList: [],
-      collegeList: [],
+      schoolName: '',
     };
   }
 
@@ -100,18 +100,24 @@ class StudentRoot extends PureComponent {
   }
 
   changeToCollege = (school = '') => {
-    const { list } = this.state;
-    const data = list.filter(item => item['school'] === school);
+    this.setState({
+      schoolName: school
+    });
+  }
+
+  fetchCollegeInfo = () => {
+    const { list, schoolName } = this.state;
+    const data = list.filter(item => item['school'] === schoolName);
     if(data.length > 0) {
-      this.setState({
-        collegeList: data[0]['colleges']
-      });
+      return data[0]['colleges']
     }
+    return [];
   }
 
   render() {
     const { country } = this.props;
-    const { validate, captchaInstance, isSchool, isCollege, schoolList, collegeList } = this.state;
+    const { validate, captchaInstance, isSchool, isCollege, schoolList, schoolName } = this.state;
+    const collegeList = this.fetchCollegeInfo();
     return (
       <>
         <HeaderBar title={'助学计划'} arrow={true}/>
@@ -202,9 +208,7 @@ class StudentRoot extends PureComponent {
                       <VeriCodeInput
                         {...field}
                         className={'student-form__code'}
-                        icon={<i className={'iconfont iconduanxin'}
-                                  style={{fontSize: '20px', left: '12px'}}
-                        />}
+                        icon={<i className={'iconfont iconduanxin'} style={{fontSize: '20px', left: '12px'}}/>}
                         tel={props.values.tel}
                         challenge={validate}
                         errors={props.errors}
@@ -220,6 +224,7 @@ class StudentRoot extends PureComponent {
                   <StudentSelect 
                     name="school"
                     value={props.values.school}
+                    schoolName={schoolName}
                     data={{
                       key: 'isSchool',
                       val: isSchool
@@ -227,7 +232,9 @@ class StudentRoot extends PureComponent {
                     options={schoolList}
                     placeholder="请选择"
                     onChange={props.setFieldValue}
-                    clearToCollege={() => props.setFieldValue('college', '')}
+                    clearToCollege={() => {
+                      props.setFieldValue('college', '')
+                    }}
                     selectSwitch={this.selectSwitch}
                     changeToCollege={this.changeToCollege} 
                   />
@@ -246,7 +253,6 @@ class StudentRoot extends PureComponent {
                     placeholder="请先选择学校"
                     onChange={props.setFieldValue}
                     selectSwitch={this.selectSwitch} 
-                    changeToCollege={this.changeToCollege} 
                   />
                 </div>
                 <div className="student-form__item">
@@ -277,6 +283,7 @@ const StudentSelect = (props) => {
   const { 
     options = [], 
     data: { key = '' , val = false },
+    schoolName,
     isClick = true,
     name,
     value,
@@ -299,27 +306,23 @@ const StudentSelect = (props) => {
         }} 
       />
       {
-        val  &&
+        val &&
         <ul className="student-select__list">
           {
-            options.length > 0
-            ? (<>
-              {
-                options.map((item, index) => (
-                  <li 
-                    className="student-select__option" 
-                    key={index}
-                    onClick={() => {
-                      selectSwitch(key, false);
-                      onChange(name, item);
-                      typeof clearToCollege === 'function' && clearToCollege();
-                      changeToCollege(item);
-                    }}
-                  >{item}</li>
-                ))
-              }
-            </>)
-            : <li className="student-select__option">暂无数据</li>
+            options.length > 0 && options.map((item, index) => (
+              <li 
+                className="student-select__option" 
+                key={index}
+                onClick={() => {
+                  selectSwitch(key, false);
+                  onChange(name, item);
+                  if(schoolName !== item && typeof clearToCollege === 'function') {
+                    clearToCollege();
+                  }
+                  typeof changeToCollege === 'function' && changeToCollege(item);
+                }}
+              >{item}</li>
+            ))
           }
         </ul>
       }