ReactJS 条件判断为true时无内容返回问题排查

核心问题 #

你使用了forEach遍历生成推荐代码的JSX节点，forEach方法没有返回值，只会执行回调逻辑，不会返回React可渲染的元素数组，因此即使所有条件满足，也不会有内容渲染出来。

修复方法 #

将遍历方法从forEach替换为map即可，map会将每次回调返回的JSX节点收集为数组，React可直接渲染该数组。

修改后的代码片段（关键部分） #

(problemAtLine !== null && problemAtLine.end_lineno === curLineNum &&
  problemAtLine.recommendation && problemAtLine.recommendation.length && 
  this.props.viewModeDetails === "problems") && (
    // 把forEach改成map
    problemAtLine.recommendation.map((recommendationStr, index) => {
      return (
        <tr key={`ln-cr-${problemAtLine.lineno + index + 1}`}>
          <td className="lineicon"></td>
          <td key={`ln-cr-${problemAtLine.lineno + index}`} className="linenum">
            {problemAtLine.lineno + index}
          </td>
          <td key={`lc-cr-${problemAtLine.lineno + index}`} className={`selcodeline-${this.props.viewModeDetails}`}>
            {(() => {
              if (index === 0) {
                return <div className="code-recommendation-bg-selected-start"></div>;
              } else if (index === problemAtLine.recommendation.length - 1) {
                return <div className="code-recommendation-bg-end"></div>;
              } else {
                return <div className="code-recommendation-bg-middle"></div>;
              }
            })()}
            <Highlight className="python">
              {recommendationStr !== "" ? recommendationStr: " "}
            </Highlight>
          </td>
        </tr>
      )
    })
)

可选排查项 #

如果修改后仍有问题，可以按以下顺序排查：

• 确认problemAtLine.recommendation确实是数组类型，且数组项为非空的有效字符串
• 检查外层<table>、<tbody>标签是否完整，缺失表格父标签时浏览器会自动剔除<tr>节点导致内容不显示
• 确认相关样式类没有设置display: none、opacity: 0等隐藏属性

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