如何解决使用内联 html 时,ReactJS 值未存储在 for 循环中
这段代码有一个小问题(使用 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 上的错误?
我已经检查了很多次,一切看起来都很好。
解决方法
我遇到了类似的问题。尝试使用 forEach() 而不是使用 for 循环。 例如:
11754943508222875
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。