Javascript 为什么不是'；clickHandler是否处于更新状态？

我正在尝试设置一个背景，该背景随着活动按钮而改变，clickHandler将向我显示按钮的正确id，但随后无法更新状态…我错过了什么

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import river from "../img/river.jpg";
import snow from "../img/snow.jpeg";
import weather from "../img/weather.jpg";

export default class LowerHeader extends Component {
  state = {
    imgUrl: river
  };

  clickHandler = e => {
    if (e.target.id === 1) {
      this.setState({
        imgUrl: weather
      });
    } else if (e.target.id === 2) {
      this.setState({
        imgUrl: snow
      });
    } else if (e.target.id === 3) {
      this.setState({
        imgUrl: river
      });
    }
    console.dir(e.target);
  };

  render() {
    let styles = {
      backgroundImage: `url(${this.state.imgUrl})`,
      backgroundSize: "cover",
      backgroundPosition: "0% 70%",
      overflow: "hidden"
    };
    return (
      <React.Fragment>
        <div
          className="link-bg-img"
          style={styles}
          alt="Background related to tab chosen"
        />
        <header className="lower-header">
          <ul>
            <NavLink
              to="/maincontent/weather"
              id="1"
              onClick={this.clickHandler}
            >
              Local Weather
            </NavLink>
            <NavLink to="/maincontent/snow" id="2" onClick={this.clickHandler}>
              Snow Report
            </NavLink>
            <NavLink to="/maincontent/river" id="3" onClick={this.clickHandler}>
              River Flows
            </NavLink>
          </ul>
        </header>
      </React.Fragment>
    );
  }
}

import React，{Component}来自“React”；
从“react router dom”导入{NavLink}；
从“./img/river.jpg”导入河流；
从“./img/snow.jpeg”导入雪；
从“./img/weather.jpg”导入天气；
导出默认类LowerHeader扩展组件{
状态={
伊姆格尔：河流
};
clickHandler=e=>{
如果（e.target.id==1）{
这是我的国家({
伊姆格尔：天气
});
}else if（e.target.id==2）{
这是我的国家({
伊姆古尔：雪
});
}else if（e.target.id==3）{
这是我的国家({
伊姆格尔：河流
});
}
console.dir（e.target）；
};
render（）{
让样式={
backgroundImage:`url（${this.state.imgUrl}）`，
背景尺寸：“封面”，
背景位置：“0%70%”，
溢出：“隐藏”
};
返回(

当地天气
降雪报告
河流流量

);
}
}

---

我想与页面加载的初始状态保持不变…它工作。然后应该随着每个按钮的点击而改变。谢谢

e.target.id

是一个字符串，您可以将其与带有

=

的数字进行比较。它因类型不同而失败

使用类似以下内容：

clickHandler = e => {
    const id = parseInt(e.target.id, 10);
    if (id === 1) {
    ...

---

正如UjinT34所说，将字符串与带有===运算符的数字进行比较

clickhandler的另一个更优雅的解决方案是：

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import river from "../img/river.jpg";
import snow from "../img/snow.jpeg";
import weather from "../img/weather.jpg";

export default class LowerHeader extends Component {
  state = {
    imgUrl: river
  };

  clickHandler = url => {
      this.setState({
        imgUrl: url
      });
  };

  render() {
    let styles = {
      backgroundImage: `url(${this.state.imgUrl})`,
      backgroundSize: "cover",
      backgroundPosition: "0% 70%",
      overflow: "hidden"
    };
    return (
      <>
        <div
          className="link-bg-img"
          style={styles}
          alt="Background related to tab chosen"
        />
        <header className="lower-header">
          <ul>
            <NavLink to="/maincontent/weather" id="1" onClick={()=>{this.clickHandler(weather)}}>
              Local Weather
            </NavLink>
            <NavLink to="/maincontent/snow" id="2" onClick={()=>{this.clickHandler(snow)}}>
              Snow Report
            </NavLink>
            <NavLink to="/maincontent/river" id="3" onClick={()=>this.clickHandler(river)}>
              River Flows
            </NavLink>
          </ul>
        </header>
      </>
    );
  }
}

import React，{Component}来自“React”；
从“react router dom”导入{NavLink}；
从“./img/river.jpg”导入河流；
从“./img/snow.jpeg”导入雪；
从“./img/weather.jpg”导入天气；
导出默认类LowerHeader扩展组件{
状态={
伊姆格尔：河流
};
clickHandler=url=>{
这是我的国家({
imgUrl:url
});
};
render（）{
让样式={
backgroundImage:`url（${this.state.imgUrl}）`，
背景尺寸：“封面”，
背景位置：“0%70%”，
溢出：“隐藏”
};
返回(

{this.clickHandler（天气）}>
当地天气
{this.clickHandler（snow）}>
降雪报告
这个。clickHandler（river）}>
河流流量

);
}
}

这里有一个项目链接：初始加载可能需要几秒钟谢谢！忽略简单的事情…非常感谢