javascript - 如何在表单类型 = 范围的更改事件上正确更新状态,它给出了以前的状态
问题描述
我想在句柄更改函数中的更改事件之后在 url 中传递更新的状态。
它正在传递先前的状态,而不是为其提供当前更新的状态。
例如,状态值贷款期限为 13,但当我在控制台记录它时,它显示为 12。当我更改贷款金额时,它显示为 3058,但我记录了 3016,这是之前的状态。
请帮忙
import React, { Component } from "react";
import axios from "axios";
class Form extends Component {
state = {
loanAmount: "500",
loanDuration: "6"
};
handleChange = event => {
event.preventDefault();
console.log(this.state.loanAmount, this.state.loanDuration);
axios
.get(
`https://ftl-frontend-test.herokuapp.com/interest?
amount=${this.state.loanAmount}&numMonths=${this.state.loanDuration}`
)
.then(resp => {
this.props.onChange(resp.data);
this.setState({ loanAmount: this.state.loanAmount, loanDuration: this.state.loanDuration });
});
};
render() {
return (
<>
<form onChange={this.handleChange}>
<div className="amount form-control">
<label htmlFor="formControlRange">Loan Amount </label>
<span className="rangeAmount">{this.state.loanAmount}</span>
<input
type="range"
className="amountInput form-control-range"
onChange={event =>
this.setState({
loanAmount: event.target.value
})}
value={this.state.loanAmount}
min="500"
max="5000"
/>
</div>
</form>
<form onChange={this.handleChange}>
<div className="duration form-control">
<label htmlFor="formControlRange">Loan Duration </label>
<span className="rangeDuration">{this.state.loanDuration}</span>
<input
type="range"
className="amountInput form-control-range"
onChange={event =>
this.setState({
loanDuration: event.target.value,
})}
value={this.state.loanDuration}
min="6"
max="24"
/>
</div>
</form >
</>
);
}
}
export default Form;
解决方案
这是因为我们在执行 setState 后无法立即获取状态。这是 React 的功能。你最好使用 componentDidUpdate,它是 React 生命周期的一部分,当组件中有更新时调用。
您可以像这样更改代码。
import React, { Component } from "react";
import axios from "axios";
class Form extends Component {
state = {
loanAmount: "500",
loanDuration: "6"
};
componentDidUpdate = (prevProps, prevState) => {
if(prevState.loanAmount !== this.state.loanAmount || prevState.loanDuration !== this.state.loanDuration) {
console.log(this.state.loanAmount);
console.log(this.state.loanDuration);
axios
.get(
`https://ftl-frontend-test.herokuapp.com/interest?
amount=${this.state.loanAmount}&numMonths=${this.state.loanDuration}`
)
.then(resp => {
this.props.onChange(resp.data);
this.setState({ loanAmount: this.state.loanAmount, loanDuration: this.state.loanDuration });
});
};
render() {
return (
<>
<form>
<div className="amount form-control">
<label htmlFor="formControlRange">Loan Amount </label>
<span className="rangeAmount">{this.state.loanAmount}</span>
<input
type="range"
className="amountInput form-control-range"
onChange={event =>
this.setState({
loanAmount: event.target.value
})}
value={this.state.loanAmount}
min="500"
max="5000"
/>
</div>
</form>
<form>
<div className="duration form-control">
<label htmlFor="formControlRange">Loan Duration </label>
<span className="rangeDuration">{this.state.loanDuration}</span>
<input
type="range"
className="amountInput form-control-range"
onChange={event =>
this.setState({
loanDuration: event.target.value,
})}
value={this.state.loanDuration}
min="6"
max="24"
/>
</div>
</form >
</>
);
}
}
export default Form;
推荐阅读
- html - 我想让用户在单击链接时导航到页面上的某个点,并且链接是动态来自数据库的
- r - 试图在 r 中运行 cor 函数
- mysql - 同时选择连接表行的计数和计数和
- c# - 脚本运行时的 C# dlr LanguageSetup 设置
- angular - Angular:在按钮上有一个路由器链接
- windows - 如何处理 cmd.exe 中的长路径
- typo3 - TYPO3,routeEnhancers,用参数重写简单的url
- c# - 在不指定所有输入参数类型的情况下获取方法引用
- javascript - Highcharts 不更新 ajax 响应数据的数据
- date - 比较 VueJs 中的两个日期