Question

我已经声明了一个名为account_type的状态。我创建了一个onChange事件，该事件在单击div时会更改状态的值。

<div
          className="price-plan"
          value="star"
          onClick={() => this.setPlan("star")}
        >

问题是，当我第一次单击div时，account_type状态没有得到更新。仅当我单击两次时它才会更新。是否可以通过单击div来更新状态。这是我的代码的摘录，显示了我正在尝试做的事情


    let isRedirect = false;

    class PricePlan extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          account_type: "",
          renderRedirect: false
        };

        this.handleChange = this.handleChange.bind(this);
      }

      // Handle fields change
      handleChange = input => e => {
        this.setState({ [input]: e.target.value });
      };


      setPlan(plan) {
        this.setState({
          account_type: plan
        });
        console.log(this.state.account_type);
        // if (this.state.account_type !== undefined) {
        //   isRedirect = true;
        // }
      }

      render() {
        if (isRedirect) {
          return (
            <Redirect
              to={{
                pathname: "/sign-up",
                state: { step: 2, account_type: this.state.account_type }
              }}
            />
          );
        }

        return (
            <div
              className="price-plan"
              value="star"
              onClick={() => this.setPlan("star")}
            >
              <h3>{this.props.planName}</h3>
              <div className="mute price-row">Name</div>
              <p className="price">Price</p>
              <span className="billed-frequency">Cycle</span>
            </div>

        );
      }
    }

Answer 1

正如@ Jayce444所建议的那样，setState不会立即更新state。因此setPlan应该看起来像

setPlan(plan) {
    this.setState({
         account_type: plan
    });
    console.log(plan);  // Don't expect immediate state change in event handler
  }

但是您可以在this.state.account_type函数中的任何位置使用render()。并在第一次点击this.state.account_type更新后进行渲染。

输入状态未绑定onChange第一次单击

1 个答案: