React(axios)双变量过滤响应数据的语法问题排查

核心错误点梳理： #

• 直接引用element1/element2但未从this.state取值，且误用除法运算符/，实际需要字符串拼接
• filter方法使用错误：必须传入回调函数，不能直接写等式判断
• 大小写不统一：setFireMana里element2设为小写"fire"，element1是大写"Fire"，会导致匹配接口数据时出错
• 过滤到数据后未更新combinedElement状态
• 判断条件里的element2未加this.state前缀

修正后的完整代码： #

export default class Hud extends Component {
  constructor(props) {
    super(props);

    this.state = {
      element1: "blank",
      element2: "blank",
      combinedElement: "blank",
      form: "blank",
      spell: "blank",
    };
  }

  setFireMana = () => {
    // 统一大小写，避免匹配时出错
    if (this.state.element1 === "blank") {
      this.setState({ element1: "Fire" });
    } else {
      this.setState({ element2: "Fire" });
    }
  }

  combineElements = () => {
    // 从state获取变量并拼接成匹配格式
    const comboStr = `${this.state.element1}/${this.state.element2}`;
    // 正确引用state里的element2
    if (this.state.element2 !== "blank") {
      axios.get(`http://127.0.0.1:5000/Element`).then((response) => {
        // filter传入回调函数，遍历每个item匹配Combo字段
        const matchedData = response.data.filter(item => item.Combo === comboStr);
        console.log(matchedData);
        // 如果找到匹配数据，更新combinedElement为Result的"Smoke"值
        if (matchedData.length > 0) {
          this.setState({ combinedElement: matchedData[0].Result });
        }
      })
      // 捕获请求错误，方便排查问题
      .catch(err => console.error('接口请求失败:', err));
    }
  };

  render() {
    return (
      <div>
        <div className="foreground">
          <div className="left-side">
            <div className="live">{this.state.element1}</div>
            <div className="dead">{this.state.combinedElement}</div>
          </div>
          <div className="right-side">
            <div className="live">{this.state.element2}</div>
            <div className="dead">{this.state.form}</div>
          </div>
        </div>
        <div className="hud">
          <div className="mana">
            <button onClick={this.setFireMana}>
              <img src={fireicon} />
            </button>
            {/* 添加触发组合逻辑的按钮 */}
            <button onClick={this.combineElements}>组合元素</button>
          </div>
        </div>
      </div>
    )
  }
}

额外提示： #

• 补充了render方法的完整结构（原代码缺失包裹）
• 增加接口请求错误捕获，便于排查网络或后端问题
• 新增combineElements触发按钮，确保逻辑能被调用
• 判断匹配结果长度，避免无数据时出现报错

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