关于JS中的多参数多箭头函数的困惑

Question

我目前正在阅读有关 React 的教程，但我无法理解这些箭头函数的语法，尤其是在有多个参数的情况下。我来自 Python，还在学习 JS，所以请记住这一点。具有以下功能：// ADD LEADexport 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");

...然后酌情使用dispatchand调用它：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()

  }

}