React map意外行为

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呈现。它总是空的。

编辑：试图像这样执行：

<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;
        }
    });
}