Реагировать на неожиданное поведение карты

Question

У меня есть эта функция в моем файле Global.jsx:

FeGruHasChilds: (childs) => {
    childs.map((c, i) => {
        if (c.VALUEDB != null && c.VALUEDB != "") {
            console.log(c.VALUEDB);
            return true;
        }
    });
}

Я звоню так:

Global.FeGruHasChilds(myArray) &&
myArray.map((c, i) =>{
<MyComponent value=myArray[i].VALUEDB/>
})

Мое ожидаемое поведение заключается в том, что если какой-либо элемент в myArray имеет VALUEDB, то FeGruHasChilds должен вернуть true, выйти из функции и реагировать и отобразить MyComponent для каждого элемента в myArray.

Фактическое поведение: функция не завершается, если есть элемент с VALUEDB, она проверяет его для всех элементов (я зарегистрировал его в консоли). И также никогда не отображается MyComponent. Там всегда пусто.

EDIT: попытался выполнить это так:

<button onClick={() => console.log(Global.FeGruHasChilds(myArray))}>TEST</button>

Возвращает undefined

Answer 1

Если вы хотите вернуть true, если какой-либо из предметов проходит проверку, вы можете использовать Array.some():

FeGruHasChilds: (childs) =>
    childs.some(c => c.VALUEDB !== null && c.VALUEDB !== ""); // c => c would be enough if you have strings or null

В вашем случае Array.map() возвращает массив true и false. Массив сам по себе является истинным значением и должен был вызывать визуализацию компонентов все время. Однако вы не возвращаете результат из функции, и функция всегда возвращает undefined. Undefined - ложное значение, поэтому компоненты никогда не отображаются. Вы можете вернуть значение, используя ключевое слово return, или просто убрав фигурные скобки функции стрелки:

FeGruHasChilds: (childs) => {
    childs.map((c, i) => { // not returned 
        if (c.VALUEDB != null && c.VALUEDB != "") {
            console.log(c.VALUEDB);
            return true;
        }
    });
}