关于JS中多参数多箭头函数的困惑[重复]

Question

此问题已经在这里有了答案：

What do multiple arrow functions mean in javascript?（7个答案）

关闭3分钟前。

我目前正在阅读有关React的教程，但在理解这些箭头函数的语法时遇到了麻烦，特别是当有多个参数时。我来自Python，但仍在学习JS，因此请记住这一点。

具有以下功能：

// ADD LEAD
export const addLead = (lead) => (dispatch, getState) => {
    axios
        .post('/api/leads/', lead, tokenConfig(getState))
        .then(........)
}

为什么我们需要多个箭头？为什么在一组括号中使用lead，而在另一组括号中使用dispatch和getState？来自Python的这种语法令人难以置信，而且不直观。

感谢您的帮助！

Answer 1

addLead是返回函数的函数。这是使用函数主体语法而不是简洁主体语法的同一件事，这可能更清楚：

export const addLead = (lead) => {
    return (dispatch, getState) => {
        axios
            .post('/api/leads/', lead, tokenConfig(getState))
            .then(........)
    };
}

因此，您将调用addLead以获取绑定有lead的函数：

const f = addLead("some lead");

...然后根据需要使用dispatch和state进行调用：

f("dispatch", "state");

---

附带说明：函数addLead返回的结果并不返回调用axios的结果，这有点奇怪（没有更多的上下文）。我本来希望是：

export const addLead = (lead) => (dispatch, getState) => 
    axios
        .post('/api/leads/', lead, tokenConfig(getState))
        .then(........);

是：

export const addLead = (lead) => {
    return (dispatch, getState) => {
        return axios
            .post('/api/leads/', lead, tokenConfig(getState))
            .then(........);
    };
};

Answer 2

这是关闭功能。这意味着它需要一个变量并返回一个使您可以访问该变量的函数。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

您的代码本质上可以转换为以下内容

export const addLead = function(lead) {
  return function(dispatch, getState) {
axios
  .post('/api/leads/', lead, tokenConfig(getState))
  .then()
  }
}