React中(index) => (e) =>双层箭头函数语法及作用解析

语法本质：高阶函数 + 闭包 #

这种写法是返回函数的函数（高阶函数），拆解开看等价于普通函数写法，更容易理解：

const updateState = function(index) {
  // 外层函数接收index参数，返回一个新的函数
  return function(e) {
    // 内层函数接收事件对象e，执行实际逻辑
    const newArray = data.map((item, i) => {
      if (index === i) {
        return { ...item, [e.target.name]: e.target.value };
      } else {
        return item;
      }
    });
    setData(newArray);
  };
};

外层函数接收index后，返回的内层函数会通过闭包“记住”这个index的值，直到内层函数被调用。

在这段React代码里的核心作用 #

这段代码是用来给列表中的表单元素绑定事件，精准更新数组对应索引元素的状态，具体逻辑：

1. 提前传入索引：当你在渲染列表时，调用updateState(index)，会立刻返回一个绑定了当前index的事件处理函数。比如：

   {data.map((item, index) => (
     <input
       key={index}
       name="username"
       value={item.username}
       onChange={updateState(index)} // 传入index，拿到绑定该索引的事件函数
     />
   ))}
   

2. 事件触发时执行更新：当输入框触发onChange事件，浏览器会把事件对象e传给内层函数，此时函数会利用之前记住的index，找到数组中对应位置的元素，复制并更新指定字段（e.target.name对应的属性），最后用setData更新状态。

为什么要用双层箭头函数？ #

如果直接写成单箭头函数const updateState = (index, e) => {...}，在onChange里写onChange={updateState(index, e)}会直接执行函数（而不是事件触发时执行）——因为onChange需要接收一个函数引用，而不是函数执行的结果。双层箭头函数刚好解决了这个问题：调用外层函数返回内层函数的引用，事件触发时才执行内层逻辑，同时还能通过闭包保留住需要的index参数。

内容的提问来源于stack exchange，提问作者aysha faisal