反应地图意外行为

Question

I've got this function in my Global.jsx file:

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

I'm calling it like this:

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

My expected behaviour is, that if any item in myArray has an VALUEDB then FeGruHasChilds should return true and quit the function and react should render MyComponent for every item in myArray .

Actual behaviour: The function doesn't quit if there is an item with VALUEDB , it does check it for all items (I logged it in the console). And also there is never any MyComponent rendered. It's always empty.

EDIT: tried to execute it like this:

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

It returns undefined

Answer 1

When you want to return true if any of the items passes a test, you can use Array.some() :

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

In your case Array.map() returns an array of true and false . An array by itself is a truthy value, and should have caused the components to be rendered all them time. However, you don't return the result from the function, and the function always returns undefined . Undefined is a falsy value, so the components never render. You can return the value by using the return key word, or just remove the curly brackets of the arrow function:

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