Javascript 按钮的索引在单击时的值与显示的值不同

我有一个按钮，它是jsx中数组的一部分

该按钮显示索引1、2、3等。 但是，当我按下按钮并记录时，每次都会得到相同的值，即for循环的长度。 我不能把我的头绕在它周围。我在想可能是钥匙错了，把两个部件连在一起，但这不是问题所在

 const getRows = () => {
    var rows = [];
    for (var i = 0; i < Math.max(dropped2 && dropped2.length, dropped1 && dropped1.length); i++) {
      console.log(i);
      rows.push(
        <div key={i}>
          <Browser>
            <DropItArranged left dropped={dropped2 && dropped2.length > i && dropped2[i]} index={i} selected={displayIndex === i} />
            <DropItArranged dropped={dropped1 && dropped1.length > i && dropped1[i]} index={i} selected={displayIndex === i} />
            <button key={"selectButton" + i} className={displayIndex === i ? "button is-link" : "button"} onClick={e => { console.log(i); dispatch(allActions.changeDisplayedContent(i)) }} > {i}</button>
          </Browser>
        </div>
      );
    }
    return rows;
  }

const getRows=（）=>{
var行=[]；
对于（变量i=0；i
i&&dropped1[i]}index={i}selected={displayIndex===i}/>
{console.log（i）；分派（allActions.changeDisplayedContent（i））}>{i}
);
}
返回行；
}

输出始终是for循环的长度

以下是一个干净的版本：

    var rows = [];
    for (var i = 0; i < Math.max(dropped2 && dropped2.length, dropped1 && dropped1.length); i++) {
      rows.push(
        <div key={i}>
             <button key={"selectButton" + i} onClick={e => { console.log(i); } > {i} </button>
        </div>
      );
    }
    return rows;
  

var行=[]；
对于（变量i=0；i{i}
);
}
返回行；

这是返回函数：

return (
    <LeftPanel>
      <div>
        <h5 className="title is-5">Browse</h5>
      </div>
      <Column>
        {getRows()}
      </Column>
    </LeftPanel>
  )

返回(
浏览
{getRows（）}
)

您可以尝试将

var i=0

更改为

let i=0

。 您的问题与Javascript中的Scope变量有关。

let和var之间的主要区别在于，使用let定义的变量的作用域仅限于声明它的块，而使用var声明的变量具有全局作用域。

---

对于这种情况，当您使用

let

时，会为循环的每次调用创建一个新变量

i

，其范围仅限于循环的块。因此，您可以为每个

console.log

添加新变量。关于更多详细信息，请参见此按钮：

按钮没有属性键-请尝试使用IDThank。谢谢，我尝试了此方法，但问题仍然存在。我真的很困惑。使用

.map（）

，使用

for

循环，您最终会遇到关于let和var的问题，只有当它们以异步方式处理时才会发生。在这里，我认为这不是一个问题。我不这么认为

let

和

var

具有不同的作用域，因此问题可能发生在每个代码行中，而不仅仅是异步方式。感谢您，这非常有效。我总是用let编写它，所以我以前没有遇到过这个错误（我复制了部分代码）。我感谢你和其他人的意见！