表单提交的简单优化

今天，分配的任务做完，问我们组长有没有工作需要帮助，她来了句把自己代码优化下，影响性能的地方，以及 不规范的地方 自己优化下，然后给她看... （等着被吊）

image.png

优化前 （好吧确实臃肿）

 handleSubmit = () => {
    // const {
    //   // navigation: { navigate },
    //   ContactStore: { first, second, data },
    // } = this.props;
    //上传 first, second, data
    if (!this.state.FirstSelectName) {
      Toast.show('请选择第一联系人关系', {
        position: Toast.positions.CENTER,
      });
      return false;
    }
    if (!this.state.selectphone) {
      Toast.show('请选择第一联系人姓名', {
        position: Toast.positions.CENTER,
      });
      return false;
    }
    if (!this.state.SecendSelectName) {
      Toast.show('请选择第二联系人关系', {
        position: Toast.positions.CENTER,
      });
      return false;
    }
    if (!this.state.selectphone_) {
      Toast.show('请选择第二联系人姓名', {
        position: Toast.positions.CENTER,
      });
      return false;
    }
    if (this.state.selectphone === this.state.selectphone_) {
      Toast.show('请不要重复选择联系人', {
        position: Toast.positions.CENTER,
      });
      return false;
    }
    //上传通讯录
}

优化后 （指导下...）

...
 static defaultProps = {
    errorInfo:{
   FirstSelectName:"请选择第一联系人关系",
      selectphone:"请选择第一联系人姓名",
      SecendSelectName:"请选择第二联系人关系",
      selectphone_:"请选择第二联系人姓名",
      errorduplicate:"请不要重复选择联系人",
    }
  };
....
 handleSubmit = () => {
   const {errorInfo,navigation} = this.props;
   const formCheckArray = ["FirstSelectName","selectphone","SecendSelectName","selectphone_"];
   const result = formCheckArray.find(key=> !this.state[key]);
   if(result){
    Toast.show(errorInfo[result], {
      position: Toast.positions.CENTER,
    });
     return false;

   }
    if (this.state.selectphone === this.state.selectphone_) {
      Toast.show(errorInfo.errorduplicate, {
        position: Toast.positions.CENTER,
      });
      return false;
    }
    //上传通讯录
}

是不是舒服多了 ，这里有个优化原则 就是把静态内容 统一管理。 还有其他的优化方案，待研究。。。。
这里记录下 es6的 find的使用：
语法：arr.find(callback[, thisArg])

描述：
find 方法对数组中的每一项元素执行一次 callback 函数，直至有一个 callback 返回 true。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回 undefined
注意 callback 函数会为数组中的每个索引调用即从 0 到length - 1，而不仅仅是那些被赋值的索引，这意味着对于稀疏数组来说，该方法的效率要低于那些只遍历有值的索引的方法。

callback 函数带有3个参数：当前元素的值、当前元素的索引，以及数组本身。

如果提供了 thisArg 参数，那么它将作为每次 callback 函数执行时的上下文对象，否则上下文对象为 undefined

find 方法不会改变数组。

在第一次调用 callback函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。

返回值： 当某个元素通过 callback 的测试时，返回数组中的一个值，否则返回 undefined。