1

Проблема в том,что при выполнении фильтрации, когда я заполняю оба инпута-селекта, то есть фильтрую сразу по двум параметрам,стейт с отфильтованным массивом появляется с запозданием, и фильтрует по прошлым параметрам. Как можно исправить такое поведение? В чём может заключаться причина? Я делаю фильтрацию в таблице,с помощью инпута-селекта. На каждый инпут-селект повешен onChange: <Form.Control as={'select'} name={'manager'} onChange={this.handleChangeManagerFilter}> handleChangeManagerFilter непосредственно выполняет фильтрацию, в зависимости от того, инпут с каким именем ему приходит. Также он меняет стейт:помещает в него отфильрованный массив, и boolean-флаг который показывает что массив был отфильтрован.[фильтрация по двум параметрам][1]

2
  • Возможно, причина в том, что в state передается тот же массив, а не новый, поэтому не происходит ререндеринг. Можете попробовать передавать в функцию, изменяющую state, массив вида [...array], а не просто array. А изменение state происходит через хук useState или через setState? Commented 24 апр. 2021 в 15:21
  • Нет, в стейт определённо передаётся новый массив.Я попробовал передать [...array] это не помогло:стейт меняется только на следующий рендер, то есть всегда с запозданием.Изменение state происходит через setState.Мне кажется,причина в том, что setState асинхронна. В документации по реакту рекомендуют передавать функцию, а не объект. Но мне это не подходит, так как меня не интересует предыдущее состояние, ну и к тому же это не сработало Commented 24 апр. 2021 в 15:35

1 ответ 1

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}
        })
    }```

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.