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

Posted 2023-02-22

【中文标题】使用内联html时ReactJS值未存储在for循环中

【英文标题】：ReactJS value not being stored in for loop while using inline html

【发布时间】：2021-05-26 09:42:08

【问题描述】：

我对这段代码有一个小问题（使用 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 的错误？ 我检查了很多次，一切看起来都很好。

【参考方案1】：

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

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