Реагируйте, показывая 0 вместо ничего с условным компонентом короткого замыкания (&&)

Question

У меня есть следующий простой оператор короткого замыкания, который должен показывать либо компонент, либо ничего:

{profileTypesLoading && <GeneralLoader />}

Если утверждение ложно, оно выводит 0 вместо ничего.

Я сделал console.log(profileTypesLoading) только для того, чтобы быстро увидеть, каков статус свойства profileTypesLoading, и он равен 1 или 0, как и ожидалось. 0 должно быть ложным ... ничего не отображать. Правильно?

Есть идеи, почему это произойдет?

Answer 1

Поскольку ваше условие ложно и поэтому не возвращает второй аргумент (<GeneralLoader />), он вернет profileTypesLoading, что является числом, поэтому реагирует на это, поскольку React пропускает рендеринг для всего, что typeof boolean или undefined и будет отображать все, что typeof string или number:

Чтобы сделать его безопасным, вы можете использовать троичное выражение {condition ? <Component /> : null} или логическое выражение вашего состояния, например {!!condition && <Component />}

Answer 2

Это решит проблему:

{!!profileTypesLoading && <GeneralLoader />}

Как он будет конвертировать 0 в ложь. Причина в том, что когда 0 следующее условие не выполняется, оно ведет себя как число в JavaScript, поэтому здесь помогает двойное отрицание.