React数组映射函数计数器值始终相同

Question

在我的react应用程序中，我使用数组map()函数生成JSX。在这种情况下，我使用useState来设置数组的值。我正在使用计数器来管理数组的索引。

let c= 0
arr.map((arr2, index) => {
c++ 
chk_str = arr2.map((value) => {
frc_t_id = value.t_id;
return <div class="form-check mb-1">
<input type="checkbox" class="form-check-input" value={value.domain} onChange={e => {setData(data.splice(c, 0, {domain: e.target.value}))}} />
<label class="form-check-label" for="exampleCheck1">{value.domain}</label>
</div>
})

return <div className="FormGroup col-md-12">{chk_str}
<select name="status" id="" placeholder="Server Status type" class="custom-select" onChange={e => {console.log(c); data[c].server = e.target.value; setData(data)}}>
<option value={t_id}>{host_name}</option>
<option value={frc_t_id}>{keys[index]}</option>
</select></div>
})

第一个数组中有两个元素。这里的问题是在下拉onChange事件中计数器值c总是2。请帮助

Answer 1

使用map的index而不是let c = 0，因为let是块范围，所以它不能很好地与map功能配合使用