Javascript 使用内联html时未将ReactJS值存储在for循环中

我对这段代码有一个小问题（使用PrimeReact）：

这是结果,

但是这里的问题是，当我在第一个下拉列表中选择某个选项时，for循环中的值“i”是0，尽管当onChange被触发时，

（e）=>this.updateTypeFilterAtIndex（e.value，i）

传递的值“i”将是1而不是0。因此，它将引用错误的下拉列表。 这发生在所有下拉列表中，看起来回调中存储的值是提前一次迭代的。这是正常的还是React上的错误？

---

我检查了很多次，看起来都很好。

我也有类似的问题。尝试使用forEach（）而不是使用for循环。 例：

    let dropDownOptions = [];
    for(var i = 0; i<this.state.filter_bonus.length;i++){
        var filter_option = this.state.filter_bonus[i];
        dropDownOptions.push(
            <React.Fragment>
            <Dropdown value={filter_option.type.bonus_name} 
                options={this.state.bonus_map} 
                onChange={(e) => this.updateTypeFilterAtIndex(e.value,i)} 
                optionLabel="bonus_name" 
                filter showClear filterBy="bonus_name" 
                placeholder="Select a Bonus" />
            <span>
                <InputNumber value={filter_option.value} 
                onValueChange={(e) => this.updateValueFilterAtIndex(e.value,i)} 
                mode="decimal" showButtons min={0} max={100} />
            </span>    
            </React.Fragment>
        );
    }

updateTypeFilterAtIndex(val,index){
    let new_arr = [...this.state.filter_bonus];
    console.log(index);
    new_arr[index]['type'] = val;
    this.setState({filter_bonus: new_arr});
}

this.state.filter_bonus.forEach((item, index)=>{
...
})