Проблема в том,что при выполнении фильтрации, когда я заполняю оба инпута-селекта, то есть фильтрую сразу по двум параметрам,стейт с отфильтованным массивом появляется с запозданием, и фильтрует по прошлым параметрам. Как можно исправить такое поведение? В чём может заключаться причина?
Я делаю фильтрацию в таблице,с помощью инпута-селекта. На каждый инпут-селект повешен onChange:
<Form.Control as={'select'} name={'manager'} onChange={this.handleChangeManagerFilter}>
handleChangeManagerFilter
непосредственно выполняет фильтрацию, в зависимости от того, инпут с каким именем ему приходит. Также он меняет стейт:помещает в него отфильрованный массив, и boolean-флаг который показывает что массив был отфильтрован.[
1 ответ
Мне помогло следующее:
я стал фильтровать массив,который должен попасть в стейт, не в функции,которая потом вызывает функцию которая уже вызывает setState
, а внутри функции,которая непосредственно вызывает setState
. И в сам setState
я стал передовать функцию, а не объект,что позволило использовать в фильтрации корректные значения this.state
,на которых эта фильтрация основанна : prevState.manager
и prevState.managerSupportForCanc
То есть те,кто столкнётся с такой проблемой должны знать: В настоящее время setState
работает асинхронно внутри обработчиков событий.
Более подробно читайте в документации по react "Состояние компонента"
this.setState((prevState) => {
const filtCancClients = this.props.canceledClients.filter(client => {
if (client.ownerManager && client.ownerManager.id && client.ownerSupportManagerFirst && client.ownerSupportManagerFirst.id) {
const managerId = client.ownerManager.id
const managerSupId = client.ownerSupportManagerFirst.id
// console.log(`${managerId}===${this.state.manager},${managerSupId}===${this.state.managerSupportForCanc}`)
return managerId === prevState.manager && managerSupId === prevState.managerSupportForCanc
}
})
return {[name]: filtCancClients}
})
}```
useState
или черезsetState
?setState
.Мне кажется,причина в том, что setState асинхронна. В документации по реакту рекомендуют передавать функцию, а не объект. Но мне это не подходит, так как меня не интересует предыдущее состояние, ну и к тому же это не сработало