Условный рендеринг не защитил от рендеринга
У меня есть этот фрагмент кода:
document.lines && (<div>
<h4>Title1</h4>
{
document.lines
.concat(["end"])
.filter(Boolean)
.map((line, i) =>
<p key = {i}>{line}</p>
)
}
</div>)
Все отлично работает при действующем document.lines. В одном из моих тестов я использовал ложное значение. Думал, что document.lines && меня защитит, но нет. Я сталкиваюсь с этой машинописной ошибкой:
TypeError: Cannot read property 'concat' of undefined
В мире angular я бы написал <div *ngIf = "document.lines">, а в мире vue я бы написал <div v-if = "document.lines">. Я думаю, что мне что-то не хватает с реакцией.
Почему моя охрана меня не защитила? Как я могу изменить свой код, чтобы избежать проблемы?
Странно, это должно было защитить тебя. Вы уверены, что ошибка указывает на эту строку, а не на какой-то другой concat? Можете ли вы создать сокращенный тестовый пример, который показывает ошибку?
@GlebKost Я постараюсь создать правильный минимальный воспроизводимый пример с помощью stackblitz.
@GlebKost так всегда проще. Это помогает мне найти то, что мне не хватало. Я смог ответить. Спасибо
@aloisdg Отлично! Со мной случалось много раз;)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Таким образом, ваш охранник просто проверяет, существует ли document.lines, но не массив.
Измените охрану на:
Array.isArray(document.lines) && ...
Поскольку ошибка говорит 'concat' of undefined, мне кажется, это не имеет ничего общего с тем, является ли он массивом или не является.
Неа. Пробовали безуспешно.
@GlebKost вообще-то ты прав. @aloisdg, а вы уверены, что этот document.lines.concat больше нигде не используете?
Вы обернули свой код внутри { ... }? Без них document.lines && будет читаться реакцией как обычный html (демонстрация этого поведения).
Попробуй это:
{
document.lines && <div>
<h4>Title1</h4>
{
document.lines
.concat(["end"])
.filter(Boolean)
.map((line, i) =>
<p key = {i}>{line}</p>
)
}
</div>
}
Вот Рабочая демонстрация, созданный с помощью stackblitz. (Вы можете установить для строк значение undefined, чтобы показать, что случай ложной обработки обрабатывается правильно).
пустой массив, объекты и т. д. не являются ложью. Трудно сказать, пока вы не дадите консольный журнал document.lines