我正在尝试更新状态 "Experience" 但我没有获得更新值。如果我的代码有误，请更正

Question

我正在尝试计算经验年份，因此我将状态“Experience = 0”初始化并将当前年份初始化为“currentDt”状态

    constructor(props){
    super(props);
    this.state = {
        CurrentDt : new Date().getFullYear(),
        DOJ : 0,
        Experience : 0
    }
}

获取“DOJ”状态的用户输入并使用 setstate() 进行更新

    GetJoiningDt = (event) =>{
    const DojValue = event.target.value;
   this.setState({
           DOJ :DojValue
       })
}

下面的代码用于减去 currentYear 和 DOJ 年份，然后尝试通过减去的值更新“体验”状态`

    calculateExperience = ()=>{
    alert("Inside_calculateExperience");
    let a = this.state.CurrentDt;
    let b = this.state.DOJ;
    var ExpValue = a - b;        //2021-2015
    alert(ExpValue);             // 6
    this.setState({
        Experience : ExpValue     //0
    })
}

当我提醒“ExpValue”的值时，它显示值 6 但在 setstate() 内部它更新 0。并将状态转换为 JSON。

    GetAsJSONData = () =>{
    console.log("JsonData");
    this.calculateExperience();
    let JsonData = {
        Experience : this.state.Experience
    }
    let showdata = JSON.stringify(JsonData);
    document.querySelector('label').textContent = showdata;
    document.write(showdata);

}


    render(){
    return(
        <form>
            <input type="text" value={this.state.DOJ} onChange= 
            {this.GetJoiningDt} placeholder="Year of DOJ" name="fullname" /> 
             <br/>  
            <button type="submit" onClick={this.GetAsJSONData}>Convert 
            Json</button><br></br>
            <label></label>
        </form>
    )
}

Answer 1

你需要考虑Async和Await。我为你做了一个沙盒版本。请检查下面的link

https://codesandbox.io/s/mystifying-water-9w238?file=/src/App.js

Answer 2

您需要防止页面在提交表单后重新加载，因为页面重新加载后反应状态会丢失。

<form id='form'>
<input type='text'>
<button type='submit'>submit</button>
</form>
<script>
    document.getElementById('form').onsubmit = e => {
        e.preventDefault();
    }
</script>

如果您不想这样做，请使用 localstorage 对象来存储您的状态，然后在提交表单后保留它。

我正在尝试更新状态 "Experience" 但我没有获得更新值。如果我的代码有误，请更正

Iam trying to update the state "Experience" but I didn't get updated value. please correct if my code is wrong

setstate

reactjs