javascript - "or"运算符在 react 的渲染方法中没有按预期工作

Question

我正在尝试使用“或”||我的渲染方法中的运算符像这样使用react(目的是决定是否显示元素)

<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

由于逻辑表达式是从左到右求值的，因此使用以下规则测试它们是否存在可能的“短路”求值:

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

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