返回循环内项目的名称，而不是遍历它们预反应

如何解决返回循环内项目的名称，而不是遍历它们预反应

使用 preact 和 GUN。下面的代码遍历列出的所有产品（不止一个）并返回名称、价格和描述。

        <div class="store-items">


          ${Object.keys(this.state.items).map(k => {

            const i = this.state.items[k];
            return html`
              <div class="store-item">
        -->     <p onClick=${this.showName()} class="name">${i.name}</p>
                <p class="description">${i.description}</p>
                <p class="price">${i.price}</p>
              </div>
            `
          })}
        </div>

showName() 是什么，以便我在单击它时记录 i.name。我花了一些时间在这上面，问题是所有的 i.names 都被记录下来，而不仅仅是我点击的那个。另一个问题是 [k] 和 i 在此块之外编写函数时无法识别。

解决方法

可以修改showName函数吗？想要这样的工作：

    <div class="store-items">


      ${Object.keys(this.state.items).map(k => {

        const i = this.state.items[k];
        return html`
          <div class="store-item">
           <p onClick=${this.showName(k,i.name)} class="name">${i.name}</p>
            <p class="description">${i.description}</p>
            <p class="price">${i.price}</p>
          </div>
        `
      })}
    </div>

,

如果您只想记录 i.name，没有别的，以下将起作用：

<p onClick=${() => console.log(i.name)} class="name">${i.name}</p>

如果您想将其提取到专用函数中，

function showName(name) {
  console.log(name);
}

<p onClick=${showName(i.name)} class="name">${i.name}</p>