Question

我正在尝试使用“或”||我的渲染方法中的运算符反应如此（目的是决定是否显示元素）

<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>

现在考虑以下场景（目的是决定是否展示）

方案1 :(范围未显示）

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

方案2 :(跨度显示 - 预期行为）

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

方案3 :(跨度显示 - 预期行为）

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

方案4 :(范围未显示 - 意外行为）

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

Answer 1

当逻辑表达式从左到右进行评估时，它们会被测试可能的短路＆＃34;评估使用以下规则：

false && (anything)短路评估为假。

true || (anything)短路评估为真。

因此，您应将所有条件包装到括号中并使用||

<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>

Answer 2

我认为这与短路评估（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical）有关，可以通过将OR检查放在括号中来简单修复。

您可以尝试在浏览器控制台中输入内容：

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

“或”运算符在反应的渲染方法中未按预期工作

2 个答案: