React中无法通过setState修改弹窗display状态问题求助

我帮你梳理下代码里的几个关键问题，一步步来搞定这个弹窗显示的问题：

1. 按钮点击找不到testTheState函数 #

你把testTheState定义在了render方法内部，这导致按钮的onClick事件根本找不到这个函数。解决办法很简单，把它改成类的实例方法就行：

testTheState = () => {
  // 后续的状态更新逻辑写在这里
};

然后按钮的点击事件直接绑定这个方法：

<button onClick={this.testTheState}> CLAIM PROMO CODE!!! </button>

2. 错误的嵌套状态更新方式 #

你的show是一个嵌套的样式对象，直接写this.setState({ display: "flex" })完全不对——这会在state里新增一个独立的display字段，根本不会修改到show对象里的display属性。正确的做法是先浅拷贝原有的show对象，再修改指定属性：

testTheState = () => {
  this.setState(prevState => ({
    show: { ...prevState.show, display: "flex" }
  }));
};

用函数式的setState更安全，尤其是当你的状态更新依赖之前的状态时。

3. handleUsername的状态更新错误 #

输入框的onChange里，你想更新的是info对象下的username，但直接写this.setState({ username: e.target.value })会在state里新增一个单独的username字段，完全没更新到info里。正确写法应该是：

handleUsername = (e) => {
  this.setState(prevState => ({
    info: { ...prevState.info, username: e.target.value }
  }));
};

4. setState是异步的，直接console.log看不到最新状态 #

setState不会立即修改state，所以你在testTheState里直接console.log(this.state)会输出更新前的旧状态。如果想看到更新后的状态，要用到setState的回调函数：

testTheState = () => {
  this.setState(prevState => ({
    show: { ...prevState.show, display: "flex" }
  }), () => {
    console.log("更新后的状态：", this.state);
  });
};

修复后的完整代码片段 #

class YourComponent extends React.Component {
  state = {
    show: {
      display: "none",
      justifyContent: "center",
      alignItems: "center",
      alignContent: "center",
      flexDirection: "column",
    },
    info: {
      username: "",
    },
    style: {
      color: "blue",
    },
  };

  handleUsername = (e) => {
    this.setState(prevState => ({
      info: { ...prevState.info, username: e.target.value }
    }));
  };

  testTheState = () => {
    this.setState(prevState => ({
      show: { ...prevState.show, display: "flex" }
    }), () => {
      console.log("更新后的状态：", this.state);
    });
  };

  render() {
    return (
      <>
        <div className="wallpaper">
          <div className="wrapper">
            {/* starting the first popup*/}
            <div className="popupParent">
              <div style={this.state.show} className="popup1">
                <h1>Free Robux Promo Codes</h1>
                <p> Please enter your player name below to receive the promo code </p>
                <input type="text" placeholder="username" onChange={this.handleUsername} />
                <button className="popup1button">Get Promo Code</button>
              </div>
            </div>
            {/* ending the first popup*/}
            <div className="parent">
              <img src={logo} alt="logo" />
              <h1>PROMO CODES</h1>
            </div>
            <main>
              <h2>Roblox Robux PROMO CODES</h2>
              <button onClick={this.testTheState}> CLAIM PROMO CODE!!! </button>
              <div className="scutParent">
                <BsShieldLockFill className="scut" />
                <p>No roblox login required</p>
              </div>
              <img className="photo1" src={per1} alt="character one" />
            </main>
          </div>
        </div>
      </>
    );
  }
}

另外，我还想给你提个优化建议：没必要把整个样式对象存在state里，只需要存一个isPopupVisible的布尔值就行，这样代码更简洁：

state = {
  isPopupVisible: false,
  info: { username: "" },
  style: { color: "blue" }
};

togglePopup = () => {
  this.setState(prevState => ({ isPopupVisible: !prevState.isPopupVisible }));
};

// render里的弹窗样式可以这么写
<div style={{
  display: this.state.isPopupVisible ? "flex" : "none",
  justifyContent: "center",
  alignItems: "center",
  alignContent: "center",
  flexDirection: "column",
}} className="popup1">

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