javascript - 使用内联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>
        );
    }

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

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

这是结果，

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

标签： javascripthtmlreactjsprimereact

Answer 1

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

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