Почему изменение стейта не ререндерит react?
Проблема в том,что при выполнении фильтрации, когда я заполняю оба инпута-селекта, то есть фильтрую сразу по двум параметрам,стейт с отфильтованным массивом появляется с запозданием, и фильтрует по прошлым параметрам. Как можно исправить такое поведение? В чём может заключаться причина?
Я делаю фильтрацию в таблице,с помощью инпута-селекта. На каждый инпут-селект повешен onChange:
<Form.Control as={'select'} name={'manager'} onChange={this.handleChangeManagerFilter}>
handleChangeManagerFilter непосредственно выполняет фильтрацию, в зависимости от того, инпут с каким именем ему приходит. Также он меняет стейт:помещает в него отфильрованный массив, и boolean-флаг который показывает что массив был отфильтрован.[![фильтрация по двум параметрам][1]](https://i.stack.imgur.com/Wkpsk.png)
Ответы (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}
})
}```