Это вторая неделя изучения React. Сегодня была задача с фиктивным кодом, и, как и в фазе 1, мне потребовалось вдвое больше отведенного времени, чтобы закончить. НБД. Неудача — лучший учитель; Теперь я знаю, как расставить приоритеты в учебе перед настоящим испытанием. Извлечение данных, отображение их на странице и кодирование прослушивателей событий не составило особого труда. Самыми сложными частями были, безусловно, форма и фильтр.
Сегодня методом проб и ошибок я многому научился. Особенно мне хотелось поделиться тем, с чем я столкнулся при работе с фильтром при использовании метода установки состояния. Вот функция, которую я передаю в качестве обработчика onChange:
Почему эта концепция важна? Итак, в приведенном выше коде я использую «e.target.value» в качестве критерия фильтрации. Изначально моя строка 24 выглядела так:
Это привело к тому, что моя страница отображала отфильтрованные критерии с опозданием на одну букву. Если бы я набрал «al», страница отобразила бы растения с критерием «a». В предыдущей гифке мне нужно было только ввести «al», чтобы на странице отобразилось растение алоэ. Ниже показано растение алоэ после того, как пользователь введет «alo».
Асинхронность метода установки состояния означала, что мое состояние не обновлялось к тому времени, когда функция отображала «отфильтрованный» список растений. По сути, это жестко запрограммированное отставание.
Другая причина, по которой это произошло, заключается в том, что эти строки кода были инкапсулированы внутри функции. React перерисовывает компоненты каждый раз, когда обновляется состояние. Из-за ограждения функции код, следующий за установщиком состояния, выполнялся слишком быстро; если установщик состояния был вызван непосредственно в строке поиска, то компонент будет повторно отображаться после изменения, а затем массив filteredPlants будет повторно отображаться с соответствующим состоянием фильтра.
