Javascript &引用；或；运算符在react的渲染方法中未按预期工作

我试图在我的react渲染方法中使用“或”| |操作符，如下所示（目的是决定是否显示元素）

场景2：（跨度显示-预期行为）

场景3：（跨度显示-预期行为）

场景4：（范围未显示-意外行为）

---

我认为这与短路评估（）有关，可以简单地通过将OR复选框放在括号中来修复

您可以尝试在浏览器控制台中键入：

true || true && false //will return true
(true || true) && false //will return false

---

由于逻辑表达式是从左到右求值的，因此使用以下规则对其进行可能的“短路”求值测试：

false&（任何）

短路评估为false

true | |（任何）

短路评估为true

因此，您应该将所有条件都用括号括起来，并使用

|

<div className="item-actions">
    { (this.state.addedMovieTag.filter(function( obj ) {
        return obj.trivia_id === item.id;
    }).length > 0 || this.state.addedPersonTag.filter(function( obj ) {
        return obj.trivia_id === item.id;
    }).length > 0 ) &&  <span className="fa fa-edit" onClick={this.saveChanges.bind(this, item)}></span>}
    <span className="fa fa-trash"></span>
</div>

{（this.state.addedMovieTag.filter）（函数（obj））{
返回obj.trivia_id===item.id；
}).length>0 | |此.state.addedPersonTag.filter（函数（obj）{
返回obj.trivia_id===item.id；
}).length>0）和&}

您的表达式是：

a | | b | | c&d

。那么

d

是否与

c

相关？对因此，如果

a

或

b

为true，它将返回true。但是如果

c

为false，它将不会呈现

d

。渲染d时的唯一情况是

a

和

b

为假，而

c

为真。尝试

（a | | b | | c）和&d

而不是

a | | b和&c

与

（a | | b）和&c

不同的逻辑运算符优先级错误（是您想要的后者）？此外，我建议将该逻辑从视图中移出，并将其分配给一个变量，这样它就可以让视图只使用易于阅读的简单逻辑进行渲染，例如，

{hasContentToDisplay&}

@mathielo非常感谢。新手错误从我的侧面有点无关，但是如果你在代码< >过滤器>（<）/代码>下检查<代码>长度> 0代码/代码>，你可能想考虑使用<代码>。

this.state.addedMovieTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 1 
this.state.addedPersonTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 0

this.state.addedMovieTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 2
this.state.addedPersonTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 0

this.state.addedMovieTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 2
this.state.addedPersonTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 1

true || true && false //will return true
(true || true) && false //will return false

<div className="item-actions">
    { (this.state.addedMovieTag.filter(function( obj ) {
        return obj.trivia_id === item.id;
    }).length > 0 || this.state.addedPersonTag.filter(function( obj ) {
        return obj.trivia_id === item.id;
    }).length > 0 ) &&  <span className="fa fa-edit" onClick={this.saveChanges.bind(this, item)}></span>}
    <span className="fa fa-trash"></span>
</div>