Получить длину массива, если конкретный ключ не равен нулю
У меня есть состояние с массивом объектов:
const [UploadLogos, setUploadLogos] = useState([
{ url: null, name: null},
{ url: 'anyURL', name: null},
{ url: null, name: null}
]);
Я хочу получить длину этого массива, если ключ url не равен нулю.
Я делаю это так:
const UploadedLogosWithURL = UploadLogos.map((logo) => {
return logo.url !== null;
})
<button onClick = {() => { console.info(UploadedLogosWithURL.length) }}>
Click
</button>
Но это не работает. Где я ошибаюсь?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Почему бы вам просто не использовать filter()? это было бы что-то вроде:
const newArray = UploadLogos.filter(item => item.url !== null);<button onClick = {() => { console.info(newArray.length) }}> Click </button>
Надеюсь, поможет!
@kanishk6103 все правильно понял. Хотя я хотел бы сделать его более коротким, просто вернув ключ URL (он проверит, не равен ли он нулю).
const [UploadLogos, setUploadLogos] = useState([
{ url: null, name: null},
{ url: 'anyURL', name: null},
{ url: null, name: null}
]);
<button
onClick = {() => {
console.info(UploadLogos.filter((logo) => logo.url)).length)
}}
>
Click
</button>
Это тоже должно сработать.
Вы можете отфильтровать свое состояние, а затем получить длину отфильтрованного массива.
const initialLogos = [
{ url: null, name: null},
{ url: 'anyURL', name: null},
{ url: null, name: null}
]
const [logos, setLogos] = useState(initialLogos)
const logosWithUrl = logos.filter(logo => logo.url !== null);
const logosWithUrlLength = logosWithUrl.length;
Ваш код на самом деле работает нормально, проблема в использовании .map(), происходит то, что вы создаете новый массив, заполненный логическими результатами того, logo.url !== null или нет.
то есть [false, true, false]
из МДН:
Метод map() экземпляров Array создает новый массив, заполненный результаты вызова предоставленной функции для каждого элемента в вызывающий массив.
Решение @ kanishk6103 могло бы решить эту проблему, но небольшое улучшение заключается в том, что вам не нужно использовать сравнение, потому что вы проверяете логические значения, поэтому более кратким способом было бы:
UploadLogos.filter(logo => logo.url);
array.map(...).lengthвсегдаarray.length(ничего общего с React, это просто базовый JS).