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

Question

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

    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>
        );
    }

这应该创建多个下拉列表并将值存储在列表状态变量中，以便使用它的索引读取。这是某些选项被 selected 时调用的函数。

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

这是结果，

但这里的问题是，当我 select 例如在第一个下拉列表中的某个选项时，for 循环中的值“i”为 0，尽管当 onChange 被触发时 (e) => this.updateTypeFilterAtIndex(e.value,i) 传递的值“i”将是 1 而不是 0。因此它将引用错误的下拉列表。这发生在所有下拉菜单中，看起来存储在回调中的值是提前一次迭代。这是正常的还是 React 上的错误？我已经检查了很多次，一切看起来都很好。

Answer 1

我有类似的问题。尝试使用 forEach() 而不是使用 for 循环。例如：

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

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

ReactJS value not being stored in for loop while using inline html

html

javascript

reactjs

primereact