在 Array.map 回调中无法理解此上下文-解网

问：

我在 React 组件中有以下代码片段。这是一个微不足道的例子，但我正在努力更好地理解关键字及其上下文this

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>
          <button key={item.title} onClick={item.handleButtonClick}>
            {item.title}
          </button>
        </div>
      ))}
    </>
  );
};

我写了一个小函数，它返回一些匿名对象来填充导航栏。但是，返回的匿名对象中的上下文是未定义的。我知道如果我创建一个命名对象，那么我可以访问 title 属性，例如，但我想了解我做错了什么以及如何解决它。thismapmyObjmyObj.title

干杯。

javascript reactjs 这个

this始终引用当前上下文中的对象，在本例中，引用使用原型创建的新对象。正如@Terry所说，这里没有必要。在某些情况下，您需要区分两个名称相同但作用域不同的表达式。（例如，一个全局变量和一个同名的局部变量）。this

上一个：TypeError 中的错误：无法读取 undefined 的属性（读取“name”）

下一个：有没有办法在 React 中访问组件的“this”子项？

在 Array.map 回调中无法理解此上下文

Having trouble understanding this context in Array.map callback

评论