Можно ли комбинировать необязательную цепочку с массивами и картой (в Javascript)?

Недавно я узнал о необязательном связывании в Javascript. и использовали его в проекте React / NodeJS. Работает отлично.

Я заметил, что использую его с массивами map, даже не особо задумываясь об этом - это казалось естественным использованием (здесь items - это массив, или, возможно, undefined)

        {items?.map(postListItem => ....

То есть он будет отображаться, если items существует, но не, если items равно undefined, но позволит избежать любых ошибок времени выполнения, если я вызову map на undefined

Тем не менее, я не знаю, приемлемо ли это для использования или я неправильно использую необязательную цепочку. Я искал ответ, но пока не смог его найти, что заставляет меня подозревать, что я использую его неправильно. Любая информация очень ценится!


reactjs javascript ecmascript-next
person Cerulean    schedule 11.02.2020    source источник
comment
Похоже на изящный ярлык. Если это сработает, дерзайте   -  person CertainPerformance    schedule 11.02.2020
comment
почему кудрявый? если объект, то ключ отсутствует.   -  person Nina Scholz    schedule 11.02.2020
comment
@NinaScholz Это синтаксис JSX - { может быть помещен в некоторые позиции (например, как опора или дочерний элемент элемента), чтобы вставить то, что оценивает следующее выражение JS. Например, <div>{ true ? 'foo' : 'bar' }</div> приводит к <div>foo</div>.   -  person CertainPerformance    schedule 11.02.2020

Ответы (3)


arrow_upward
3
arrow_downward

Если цепочка не удалась, выражение будет оцениваться как undefined.

Когда дочерний элемент оценивается как undefined, он просто не отображается.

Условный рендеринг - уже довольно распространенная стратегия. Раньше, когда у вас есть что-то, что может быть массивом или может быть undefined, и вы хотите отобразить , если есть массив, вам пришлось бы сделать что-то вроде:

{ items && items.map( ...

Это работает, потому что, если items равно undefined, все выражение будет оценено как undefined, и рендеринга не произойдет, и не возникнет никаких ошибок.

Использование дополнительных цепочек работает точно так же, за исключением того, что они более краткие. Так что да, это вполне допустимый поступок.

Необязательная цепочка - это этап 4, поэтому вы можете рассчитывать на его надежную работу.

Массивы являются объектами. Но необязательная цепочка не только для объектов - она ​​может работать для всего, что может иметь свойство или метод. Например, const bar = foo?.toFixed(2) будет работать нормально, если foo равно null, undefined или число (числа имеют метод toFixed).

person CertainPerformance    schedule 11.02.2020

arrow_upward
2
arrow_downward

См. Ответ здесь относительно использования машинописного текста. Вам нужен период для нулевого безопасного массива Optional Chaining.

    this.mostRecentMfaAttempt = this.verificationsAttempts?.content?.[0]

Как использовать необязательную цепочку с массивом в Typescript?

Использование дополнительного оператора цепочки для доступа к свойствам объекта

person Matthew Payne    schedule 15.01.2021
comment
Возможно, стоит отметить, что это дает сбой, если массив существует, но пуст. - person charles-allen; 01.06.2021

arrow_upward
1
arrow_downward

Необязательный способ решения вашей проблемы:

{items?.map?.(postListItem => ....)

Подробнее читайте здесь: Веб-документы MDN: дополнительное связывание

person Arber Sylejmani    schedule 11.02.2020
comment
Это может помочь, если кто-то не знает, items массив или нет, но если он уверен, что это будет либо массив, либо undefined, второй ?. не нужен - person CertainPerformance; 11.02.2020
comment
Верно, но поскольку он сказал, что только начал изучать необязательную цепочку, я просто показывал, как это сделать, используя только необязательную цепочку, не обязательно лучший способ сделать это. - person Arber Sylejmani; 11.02.2020