У меня около 10 похожих компонентов на странице с разными именами.Каждый компонент нарисован для цикла и имеет несколько кнопок и данных.
Если я нажимаю одну кнопку на компоненте, он выполняет вызов API, и кнопки становятся отключенными, пока вызов не будет успешно завершен.
Проблема заключается в том, что если я нажимаю другую кнопку на другом компоненте, кнопка становится отключенной (что ожидается), но включает ранее нажатую кнопку (не ожидается) при изменении setState.Как сделать так, чтобы кнопка включалась только тогда, когда она в своем собственном состоянии успеха.
Именно поэтому я добавляю имена кнопок в состоянии clickedRunButton, делая ее объектом, но как добавлять элементы в этот объект во времявызов API и удаление его во время успешного вызова.
Вместо добавления другого элемента он перезаписывается.
this.state = {
clickedRunButton:{ pipeName :''}
}
onClickRun(params) {
const url = `/api/${params}/run`;
let clickedRunButton = Object.assign({},
this.state.clickedRunButton); //creating copy of object
return $.ajax({
type: 'POST',
url,
processData: false,
contentType: 'application/json',
beforeSend :() =>{
clickedRunButton.pipeName = params;
clickedRunButton[pipeName] = "run"+params;
this.setState({
clickedRunButton
})
},
success: (response) => {
if(!response.error) {
clickedRunButton.pipeName = params;
clickedRunButton[pipeName] = '';
this.setState({
clickedRunButton
})
}
},
error: (error) => {
}
});
}