React中宝可梦双属性弱点抗性渲染及倍率计算问题咨询

核心逻辑是先统计所有攻击属性对当前宝可梦的最终倍率，再过滤和渲染，避免重复渲染的同时直接算对倍率，修改后的完整代码如下：

import _ from 'lodash'
// 假设types_data是你引入的全属性克制JSON文件
const PokemonChart = () => {
  if (_.isEmpty(pokemonState)) return null

  // 初始化倍率统计对象，初始值全为1
  const effectMap = {}

  // 遍历宝可梦的每个属性，叠加倍率
  pokemonState.types.forEach(item => {
    const typeData = types_data[item.type.name]
    // 处理免疫属性，倍率直接乘0
    typeData.zero.forEach(attr => {
      effectMap[attr] = (effectMap[attr] ?? 1) * 0
    })
    // 处理两倍弱点，乘2
    typeData.double.forEach(attr => {
      effectMap[attr] = (effectMap[attr] ?? 1) * 2
    })
    // 处理1/2抗性，乘0.5
    typeData.half.forEach(attr => {
      effectMap[attr] = (effectMap[attr] ?? 1) * 0.5
    })
  })

  // 过滤掉倍率为1的无效果属性，转为数组方便渲染
  const effectList = Object.entries(effectMap).filter(([attr, rate]) => rate !== 1)

  return (
    <div>
      <h1>Type Effectiveness</h1>
      {effectList.map(([attr, rate]) => (
        <p className={`types ${attr}`} key={attr}>
          {attr} x{rate}
        </p>
      ))}
    </div>
  )
}

逻辑说明 #

• 用effectMap对象记录每个攻击属性的最终倍率，初始值默认为1，遍历宝可梦的每个属性时按克制关系叠加倍率，完全符合官方计算规则：
  • 两个属性共同弱点：2 * 2 = 4，展示x4
  • 两个属性共同抗性：0.5 * 0.5 = 0.25，展示x0.25
  • 只要有一个属性免疫某属性，最终倍率直接为0
  • 一个属性弱点+另一个属性同属性抗性：2 * 0.5 =1，会被过滤不展示
• 所有属性只会在最终渲染列表中出现一次，不会重复渲染

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