Привет всем!
Первое, что я скажу, это то, что использовать метод, о котором я собираюсь рассказать, не рекомендуется. Его следует использовать только тогда, когда вы действительно в отчаянии, ничто не работает иначе, и его использование может помочь вам найти проблему в вашем коде.
Теперь, когда мы разобрались с этим, давайте начнем!
Итак, для начала — да, это странно, но React не является… реактивным. Я мог бы вдаваться в подробности, но зачем что-то делать, если другие уже сделали это за нас?
Одна из проблем, с которой сталкивается каждый начинающий React-разработчик:
«Мой код работает, console.log печатает то, что должен, но ничего не отображается правильно!».
Очевидно, что вашим обычным ответом может быть что-то вроде: «Вы должны использовать хук ‘useState’ прямо здесь», или вы бы погрузились глубже в код, чтобы легко найти проблему, но, допустим, в данном конкретном сценарии все не так просто, и по какой-то странной причине ваша попытка использовать ‘useState’ не принесла вам нужных результатов.
Что же вы можете сделать?
Добавить условный фрагмент рендеринга!
Что это такое?
В основном это следующее:
{state && <></>}
Просто добавьте это в ваш основной файл — App.js, index.js, любой другой, который вы используете — и «отрендерите» это ничто.
Не забудьте включить:
const [state, useState] = React.useState(false);
в том же файле, и —
setState(!state);
…когда вы хотите принудительно выполнить рендеринг.
Это немного странно, если подумать, поскольку вы рендерите… ничего. Но это работает. Интересно само по себе.
Я надеюсь, что прочитанное помогло вам решить ошибки в вашем коде, расширить ваши знания или даже то, что вы просто весело провели время, изучая это.
Было ли вам весело? Дайте мне знать в комментариях.