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

Question

我目前正在阅读有关 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()
  }
}