我已经声明了一个名为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>
);
}
}
答案 0 :(得分: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
更新后进行渲染。