React渲染方法中||（逻辑或）运算符未按预期工作求助

这问题我之前也踩过坑！核心是JavaScript运算符优先级在搞鬼，导致你的逻辑判断没按预期执行。

问题根源 #

JavaScript里&&的优先级比||高，你写的表达式：

this.state.addedMovieTag.filter(...).length > 0 || this.state.addedPersonTag.filter(...).length > 0 && <span>...</span>

会被JS自动解析成：

A || (B && C)

这意味着只有当B为真时才会判断是否显示C，而A为真的话，整个表达式直接返回A（也就是true），并不会触发后面的&&逻辑，自然不会渲染你的编辑按钮。

修复方案 #

1. 用括号显式分组（快速修复）

把两个判断条件用括号包起来，强制先执行||逻辑，再和元素做&&运算：

<div className="item-actions">
  {(this.state.addedMovieTag.filter(obj => obj.trivia_id === item.id).length > 0 || 
    this.state.addedPersonTag.filter(obj => obj.trivia_id === item.id).length > 0) && 
    <span className="fa fa-edit" onClick={this.saveChanges.bind(this, item)}></span>}
  {/* 你的其他元素 */}
</div>

2. 优化代码可读性与性能（推荐）

把判断逻辑提取成变量，同时用some()替代filter().length > 0——some()会在找到第一个符合条件的元素后立即停止遍历，比过滤整个数组再取长度更高效：

render() {
  // 先提取判断逻辑，让render代码更清晰
  const hasMatchingTag = this.state.addedMovieTag.some(obj => obj.trivia_id === item.id) ||
                        this.state.addedPersonTag.some(obj => obj.trivia_id === item.id);

  return (
    <div className="item-actions">
      {/* 用变量做判断，逻辑一目了然 */}
      {hasMatchingTag && <span className="fa fa-edit" onClick={() => this.saveChanges(item)}></span>}
      {/* 你的其他元素 */}
    </div>
  );
}

另外，用箭头函数替代bind可以让写法更简洁，效果是一样的。

内容的提问来源于stack exchange，提问作者EdG