React组件中Array.map回调内this上下文未定义的原因及修复方法

问题原因 #

你遇到的this为undefined的核心原因是函数调用时的上下文丢失：

• handleButtonClick是普通函数，它的this指向由调用方式决定。当你把item.handleButtonClick直接传给onClick时，React触发事件时会直接调用这个函数引用，此时函数的执行上下文不再绑定到item对象上。在React默认启用的严格模式下，这种场景下this会变为undefined。
• 对象字面量中的普通函数不会自动将this绑定到当前对象，只有通过obj.handleButtonClick()这种形式调用时，this才会指向obj。

修复方法 #

方法1：创建对象时手动绑定this

通过bind()方法将handleButtonClick的this强制绑定到当前创建的对象，确保无论调用方式如何，this始终指向该对象：

const NAVBAR_ITEM_TITLES = ["Home", "About", "Contact"];

function makeNavbarItems() {
  return NAVBAR_ITEM_TITLES.map(item => {
    const navbarItem = {
      title: item,
      handleButtonClick() {
        console.log(`clicked the ${this.title} button`);
      },
    };
    navbarItem.handleButtonClick = navbarItem.handleButtonClick.bind(navbarItem);
    return navbarItem;
  });
}

const Navbar = () => {
  const navbarItems = makeNavbarItems();

  return (
    <>
      {navbarItems.map(item => (
        <div key={item.title}>
          <button onClick={item.handleButtonClick}>
            {item.title}
          </button>
        </div>
      ))}
    </>
  );
};

方法2：在onClick中用箭头函数包裹调用

通过箭头函数包裹调用逻辑，确保调用handleButtonClick时是通过item.的形式触发，此时this会自动指向item对象：

const NAVBAR_ITEM_TITLES = ["Home", "About", "Contact"];

function makeNavbarItems() {
  return NAVBAR_ITEM_TITLES.map(item => ({
    title: item,
    handleButtonClick() {
      console.log(`clicked the ${this.title} button`);
    },
  }));
}

const Navbar = () => {
  const navbarItems = makeNavbarItems();

  return (
    <>
      {navbarItems.map(item => (
        <div key={item.title}>
          <button onClick={() => item.handleButtonClick()}>
            {item.title}
          </button>
        </div>
      ))}
    </>
  );
};

方法3：用箭头函数定义handleButtonClick（利用闭包）

箭头函数没有独立的this，会继承定义时的外层上下文，这里可以直接通过闭包访问item变量，彻底避开this的上下文问题：

const NAVBAR_ITEM_TITLES = ["Home", "About", "Contact"];

function makeNavbarItems() {
  return NAVBAR_ITEM_TITLES.map(item => ({
    title: item,
    handleButtonClick: () => {
      console.log(`clicked the ${item} button`);
    },
  }));
}

const Navbar = () => {
  const navbarItems = makeNavbarItems();

  return (
    <>
      {navbarItems.map(item => (
        <div key={item.title}>
          <button onClick={item.handleButtonClick}>
            {item.title}
          </button>
        </div>
      ))}
    </>
  );
};

内容的提问来源于stack exchange，提问作者1sentenced