箭头函数中的第二个参数在哪里返回另一个箭头函数与 redux 反应

如何解决箭头函数中的第二个参数在哪里返回另一个箭头函数与 redux 反应

我不明白返回的箭头函数中的 (val) 来自哪里。我知道 max/minLength 是一个箭头函数，它接收输入字段（3 和 25）上的参数集，它返回一个带有名为 val 的参数的箭头函数，但它的参数在哪里。我看不出它是从哪里传来的？我是 redux 和 redux-from 的新手，所以我不确定它是否与这个有关，或者只是简单的 es6 JS。谢谢

import React,{Component} from 'react';
import {Breadcrumb,BreadcrumbItem,Button,Form,Row,Label,Col,FormFeedback} from 'reactstrap'
import {Link} from 'react-router-dom'
import {Control,LocalForm,Errors} from 'react-redux-form';

const required = (val) => val && val.length;
const maxLength = (len) => (val) => !(val) || (val.length <= len);
const minLength = (len) => (val) => (val) && (val.length >= len);
const isNumber = (val) => !isNaN(Number(val));
const validEmail = (val) => /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(val);

class Contact extends Component {
    handleSubmit = (values) => {
        console.log("Current state is:" + JSON.stringify(values));
        alert("Current state is:" + JSON.stringify(values));
    }
    
    render() {
        <LocalForm onSubmit={(values) => this.handleSubmit(values)}>
            <Row className="form-group">
                <Label htmlFor="firstname" md={2}>First Name</Label>
                <Col md={10}>
                    <Control.text model=".firstname" className="form-control" id="firstname" name="firstname"
                                  placeholder="First Name"
                                  validators={{required,minLength: minLength(3),maxLength: maxLength(25)}}/>
                    <Errors className="text-danger" model=".firstname" show="touched" messages={{
                        required: 'required',minLength: 'Must be greater than 2 Characters',maxLength: 'Must be 25 Characters or less'
                    }}/>
                </Col>
            </Row>
                        

解决方法

返回另一个函数的函数用于生成该特定函数的不同变体，以应用于不同的场景。

它几乎就像一个函数工厂。

如果将箭头函数扩展为它们所代表的标准函数语法，可能更容易理解发生了什么。

function maxLength(len) {
  return function(val) {
    return !(val) || (val.length <= len);
  }
}

您可以看到参数 len 和 val 在第三行用于条件检查。就最内层函数中的代码而言，在它之前的所有参数总是完全可用的。

下面您可以看到如何在实践中使用此 maxLength 函数根据第一个参数对您的意义执行不同的检查。

如果您的脚本对什么是“长”数组以及什么是“短”数组有一个概念，那么它的工作方式如下：

const isShortArray = maxLength(2); // `isShortArray(val)` is now a new function
const isLongArray = maxLength(4); // same core function,different context

isShortArray(['foo']); // true,array `val` has fewer elements than number `len` which was set to 2
isShortArray(['foo','bar','baz']); // false,`len` of maxLength exceeded

isLongArray(['foo','baz']); // true,this time `len` is different
isLongArray(['foo','baz','qux','foo']); // false,val.length > 4 again

这与函数式编程语言中称为柯里化的技术非常相似。您可以在 JavaScript here 中阅读更多相关信息。