Блог

у меня небольшая проблема с этим фрагментом кода (с использованием 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});
}
 

Это результат,

Но проблема здесь в том, что, когда я выбираю какой-либо параметр, например, в первом выпадающем списке, значение «i» в цикле for равно 0, хотя при запуске (e) => this.updateTypeFilterAtIndex(e.value,i) onChange переданное значение «i» будет равно 1 вместо 0. Таким образом, он будет ссылаться на неправильный выпадающий список. Это происходит со всеми выпадающими списками, похоже, что значение, сохраненное в обратном вызове, на одну итерацию впереди. Это нормально или это ошибка в React? Я проверял кучу раз, и все выглядит нормально.

У меня была аналогичная проблема. Попробуйте использовать forEach() вместо использования цикла for . Пример:

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