React中实现匹配搜索仅输出符合条件元素时渲染异常如何解决

• 数组方法使用逻辑错误：find、filter属于数组筛选类方法，回调函数的返回值仅用于判断当前项是否匹配筛选规则，不会作为最终结果返回给上层调用方。在回调内返回JSX仅会被当做布尔值判断筛选是否命中，find最终只会返回匹配到的数字值或者undefined，filter则返回数组。React渲染数字0时会直接输出到页面，多层循环产生的多个0拼接就会出现00000的异常输出。
• 嵌套循环产生大量无效返回值：多层map嵌套会生成多维数组，所有不满足if条件的分支都会隐式返回undefined，React渲染时undefined会被跳过，但筛选命中返回的数字0会被正常渲染，最终页面仅会展示一串连续的0。
• 匹配条件命中概率低：从给出的示例数据看，stat.stat.name为special-attack，all.highest_stat.name为speed，排查代码中写的匹配条件为"special-defense" === stat.stat.name，三者完全不匹配，大部分场景下逻辑都不会命中，仅返回无效值。

将筛选逻辑与渲染逻辑拆分，先完成所有数据匹配校验，确认有匹配结果后再返回JSX元素，禁止在筛选方法的回调中处理渲染逻辑。
修复代码示例：

{
  value.stats
    // 第一步：筛选effort为1的stat
    .filter((stat: any) => stat.effort === 1)
    // 用flatMap扁平化数组，同时过滤无效返回
    .flatMap((stat: any) => {
      // 第二步：匹配对应的all对象
      const matchedAll = dataPosibleValue.find(
        (all: any) => all.highest_stat.name === stat.stat.name
      )
      if (!matchedAll) return []
      // 第三步：查找符合条件的数值
      const matchedNumber = matchedAll.possible_values.find(
        (number: any) => number === stat.base_stat % 5
      )
      // 匹配成功才返回JSX，否则返回空数组跳过渲染
      return matchedNumber ? [<p key={stat.stat.name}>svin</p>] : []
    })
}

如果需要输出匹配到的数值或宝可梦名称，直接替换<p>标签内的内容即可，例如输出宝可梦名称可修改为<p>{value.name}</p>。

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