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并退出该函数并作出反应应该呈现{{1} } MyComponent中的每个项目。

实际行为：如果有一个带有myArray的项目，该函数不会退出，它会检查所有项目（我已在控制台中将其记录下来）。而且也永远不会渲染任何VALUEDB。它总是空的。

编辑：试图像这样执行它：

MyComponent

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

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。未定义是虚假的值，因此组件永远不会渲染。您可以使用return关键字返回值，也可以只删除箭头函数的大括号：

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

反应地图意外行为

1 个答案: