从reactjs中的南非身份证号码中获取出生日期

Question

编辑身份证号码时未更新出生日期。请看下面的代码，我可能在做什么。看起来它首先更新状态，然后在第二次单击时更新dob。

dob = () => {
const { idNumber } = this.state.user;
if (idNumber.length !== 0) {
let year;
const dd = Number(idNumber.substring(4, 6));
const mm = Number(idNumber.substring(2, 4));
year = idNumber[0] <= 1 ? Number(20 + idNumber.substring(0, 2)) : Number(19 + idNumber.substring(0, 2));
const formatMonthAndDay = (value, figures) => (value.toString()).padStart(2, '0');
const day = formatMonthAndDay(dd, 2);
const month = formatMonthAndDay(mm, 2);
console.log('DOB ', year + '-' + month + '-' + day);
return  year + '-' + month + '-' + day;
}
}
handleChange = async (event) => {
if (event.target) {
event.preventDefault();
const { target: { name, value }, } = event;
this.setState({
user: {
...this.state.user,
[name]: value,
dateOfBirth: this.dob(),
},
});
}
}

Answer 1

setState是异步的。componentDidUpdate可以用于对状态的更改做出反应。

代码沙箱

import React from "react";
import "./styles.css";
export default class App extends React.Component {
constructor() {
super();
this.state = {
user: {
idNumber: ""
}
};
}
componentDidUpdate(prevProps, prevState) {
// Typical usage (don't forget to compare props):
if (this.state.user.idNumber !== prevState.user.idNumber) {
this.dob();
}
}
dob = () => {
const { idNumber } = this.state.user;
if (idNumber.length !== 0) {
let year;
const dd = Number(idNumber.substring(4, 6));
const mm = Number(idNumber.substring(2, 4));
year =
idNumber[0] <= 1
? Number(20 + idNumber.substring(0, 2))
: Number(19 + idNumber.substring(0, 2));
const formatMonthAndDay = (value, figures) =>
value.toString().padStart(2, "0");
const day = formatMonthAndDay(dd, 2);
const month = formatMonthAndDay(mm, 2);
console.log("DOB ", year + "-" + month + "-" + day);
const dob = year + "-" + month + "-" + day;
this.setState({
user: {
...this.state.user,
dateOfBirth: dob
}
});
}
};
handleChange = event => {
if (event.target) {
event.preventDefault();
const {
target: { name, value }
} = event;
this.setState({
user: {
...this.state.user,
[name]: value,
}
});
}
};
render() {
return (
<div className="App">
<input name="idNumber" onChange={this.handleChange} />
</div>
);
}
}

Answer 2

您看到了setState是如何异步的。this.state在this.dob()需要之前没有机会更新。

然而，正如我的评论所说，由于DOB总是可以根据ID号计算的，所以根本不要将其存储在状态中。(如果计算更密集，可以使用React.memo()，但在这里无关紧要。(

const computeDOB = (idNumber) => {
if (idNumber.length === 0) {
return undefined;
}
let year;
const dd = Number(idNumber.substring(4, 6));
const mm = Number(idNumber.substring(2, 4));
year = idNumber[0] <= 1 ? Number(20 + idNumber.substring(0, 2)) : Number(19 + idNumber.substring(0, 2));
const formatMonthAndDay = (value, figures) => value.toString().padStart(2, "0");
const day = formatMonthAndDay(dd, 2);
const month = formatMonthAndDay(mm, 2);
console.log("DOB ", year + "-" + month + "-" + day);
return year + "-" + month + "-" + day;
};
class App extends React.Component {
constructor() {
super();
this.state = {
user: {
idNumber: "",
},
};
}
handleChange = (event) => {
if (event.target) {
event.preventDefault();
const {
target: { name, value },
} = event;
this.setState({
user: {
...this.state.user,
[name]: value,
},
});
}
};
render() {
return (
<div className="App">
<input name="idNumber" placeholder="SA ID number" onChange={this.handleChange} />
<br />
{JSON.stringify(this.state)}
<br />
{computeDOB(this.state.user.idNumber)}
</div>
);
}
}
ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>